/* Conceptix, Inc. — company page.
   Near-black ground shared with Kindry and Scuffle, the teal Edges logo, one typeface
   (Schibsted Grotesk, the wordmark's face). No motion, no scripts. */

@font-face{font-family:"Schibsted Grotesk";src:url(/fonts/schibsted-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url(/fonts/schibsted-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url(/fonts/schibsted-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --ground:#0B0A0D;      /* near-black, between Kindry #0c0a09 and Scuffle #0B0A0F */
  --raised:#151419;      /* the mark's square, quiet surfaces */
  --rule:#26242C;        /* hairlines */
  --text:#F2F1F4;        /* body and headings */
  --dim:#A9A7B1;         /* secondary text */
  --teal:#5CCDB9;        /* the logo's teal; links and the disc */
  --teal-lit:#86DECF;
  --gutter:clamp(20px,6vw,88px);
  --font:"Schibsted Grotesk",system-ui,sans-serif;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--rule) var(--ground)}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;background:var(--ground);color:var(--text);font:400 1.125rem/1.6 var(--font);-webkit-font-smoothing:antialiased;caret-color:var(--teal)}
h1,h2,h3,p,ul{margin:0}
a{color:var(--teal);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--teal-lit)}
::selection{background:var(--teal);color:var(--ground)}
:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:2px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Header */
.top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(18px,3vh,28px) var(--gutter)}
.top a:first-child{display:block;padding:8px 0}
.logo{display:block;height:30px;width:auto;fill:#EEEDF5} /* the brand files' muslin */
.logo__disc{fill:var(--teal)}
.top__mail{font-size:1rem;color:var(--dim);text-decoration:none;padding:12px 0}
.top__mail:hover{color:var(--text)}
.top__mail-short{display:none}
@media (max-width:620px){.top__mail-full{display:none}.top__mail-short{display:inline}.top__mail{color:var(--teal);font-weight:500}.logo{height:26px}}

main{flex:1}

/* Intro */
.intro{position:relative;padding:clamp(40px,7vh,96px) var(--gutter) clamp(40px,6vh,80px);isolation:isolate;overflow:clip}
.intro h1{max-width:13ch;font-weight:700;font-size:clamp(2.75rem,min(6.4vw,10.5vh),6rem);line-height:1;letter-spacing:-.035em;text-wrap:balance}
.intro__lede{margin-top:clamp(16px,2.6vh,28px);max-width:34em;font-size:clamp(1.125rem,1.6vw,1.375rem);color:var(--dim)}
.intro__mark{position:absolute;z-index:-1;right:calc(var(--gutter) - 2vw);top:50%;width:clamp(260px,34vw,520px);transform:translateY(-50%);fill:var(--raised)}
.intro__mark{overflow:visible}
.intro__mark .logo__disc{fill:var(--teal)}
/* The enlarged mark needs room beside the lede; below 1100px the header logo carries the brand alone. */
@media (max-width:1100px){.intro__mark{display:none}}

/* Services: hairline columns, not cards */
.services{padding:0 var(--gutter) clamp(36px,5vh,80px)}
.services__list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule)}
@media (max-width:1100px){.services__list{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.services__list{grid-template-columns:1fr}}
.services__list li{padding:clamp(16px,2.4vh,24px) 28px clamp(16px,2.4vh,28px) 0}
.services__list h3{font-size:1.125rem;font-weight:700;line-height:1.3}
.services__list p{margin-top:8px;font-size:1rem;color:var(--dim);max-width:30em}
.services__who{margin-top:clamp(16px,2.6vh,40px);font-size:clamp(1.125rem,1.6vw,1.375rem);font-weight:500}

/* Contact */
.contact{padding:clamp(28px,4.5vh,72px) var(--gutter);border-top:1px solid var(--rule)}
.contact__line{font-size:clamp(1.5rem,4vw,2.75rem);font-weight:700;letter-spacing:-.02em;line-height:1.2;overflow-wrap:anywhere}
.contact__mail{text-decoration-thickness:2px}

/* Closing band: on wide screens the email and the footer share one row, so the whole page fits one laptop screen */
@media (min-width:1101px){
  .close{display:flex;align-items:baseline;justify-content:space-between;gap:32px;border-top:1px solid var(--rule);padding:clamp(24px,4vh,56px) var(--gutter)}
  .close .contact,.close .foot{padding:0;border:0}
}

/* Footer */
.foot{padding:clamp(16px,2.4vh,28px) var(--gutter) clamp(20px,3vh,40px);border-top:1px solid var(--rule);font-size:.9375rem;color:var(--dim);display:grid;gap:4px}

/* The one motion moment: the logo's idea played once. The disc (the idea) slides in and
   stops a gap away from the square (the thing built). Visible at rest; skipped for reduced motion. */
@media (prefers-reduced-motion:no-preference){
  .intro__mark .logo__disc{animation:disc-arrives 1.1s cubic-bezier(.16,1,.3,1) .2s both}
  .intro__mark path:not(.logo__disc){animation:square-settles 1.1s cubic-bezier(.16,1,.3,1) both}
}
@keyframes disc-arrives{from{transform:translateX(-14px);opacity:0}to{transform:none;opacity:1}}
@keyframes square-settles{from{fill:var(--ground)}to{fill:var(--raised)}}

@media (forced-colors:active){.logo,.intro__mark{fill:CanvasText}}
@media print{body{background:#fff;color:#000}.intro__mark{display:none}a{color:#000}}



/* ---------- SST: its garden tower, drawn and animated as on sustainablesupport.org ---------- */
/* The tower art is SST's own SVG (Conceptix built that site). Colours are SST's dark theme. On desktop the stage holds
   still while the plants grow up the tower, bottom to top, as the visitor scrolls. */
@font-face{font-family:"IBM Plex Serif";src:url(/fonts/plex-serif-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Montserrat";src:url(/fonts/montserrat-900.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Montserrat";src:url(/fonts/montserrat-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Next";src:url(/fonts/atkinson-next-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Next";src:url(/fonts/atkinson-next-700.woff2) format("woff2");font-weight:700;font-display:swap}
.sst{--sky-top:#0e1512;--sky-low:#16201b;--horizon:rgba(236,243,238,.08);--cloud:#18231d;--hill-far:#14231b;--hill-near:#172b20;
  --furrow-line:rgba(95,211,138,.045);--ground-far:#183224;--ground-near:#1b3626;--sst-text:#ECF3EE;--sst-dim:#A7B8AE;--sst-mint:#5FD38A;
  position:relative;color:var(--sst-text);view-timeline:--sst block}
.sst__stage{position:sticky;top:0;height:100svh;min-height:560px;overflow:clip;
  background:linear-gradient(to bottom,transparent 70%,var(--horizon) 70%,var(--horizon) calc(70% + 1px),transparent calc(70% + 1px)),
    linear-gradient(to bottom,var(--sky-top) 0%,var(--sky-low) 70%,var(--ground-far) 70%,var(--ground-near) 100%)}
.sst-scene{position:absolute;inset:0;--sh:100svh}
.sst-scene .land{position:absolute;inset:0;pointer-events:none}
.sst-scene .land-clouds{position:absolute;left:0;top:6%;width:100%;height:26%;fill:var(--cloud)}
.sst-scene .land-hills{display:block;overflow:visible}
.sst-scene .land>.land-hills{position:absolute;left:0;width:100%;bottom:30%;height:clamp(70px,17%,170px)}
.sst-scene .land-far{fill:var(--hill-far)}
.sst-scene .land-near{fill:var(--hill-near)}
.sst-scene .land-field{position:absolute;left:0;width:100%;top:70%;height:30%}
.sst-scene .land-field g{fill:none;stroke:var(--furrow-line);stroke-width:2;vector-effect:non-scaling-stroke}
.sst-scene .scene-art{position:absolute;inset:0}
.sst-scene .tower-art{position:absolute;top:16%;right:12%;height:118%;width:auto;aspect-ratio:350/1290}
.sst-scene .mid-t{position:absolute;height:76.7%;top:34%;width:auto;aspect-ratio:350/1290;overflow:visible}
.sst-scene .mid-t.ml{left:calc(88% - 53.84svh)}
.sst-scene .mid-t.mr{left:calc(88% + 1svh)}
.mid-body{--plants-shown:0}
.plant{transform-box:view-box;opacity:var(--plants-shown,1)}
.mid-t .plant{--plants-shown:1}
.sst-scene .p0{transform-origin:250.2px 1238.4px}
.sst-scene .p1{transform-origin:101.6px 1238.4px}
.sst-scene .p2{transform-origin:59.7px 1039.6px}
.sst-scene .p3{transform-origin:58.8px 1043.0px}
.sst-scene .p4{transform-origin:173.4px 1044.2px}
.sst-scene .p5{transform-origin:291.1px 1043.0px}
.sst-scene .p6{transform-origin:290.2px 1039.6px}
.sst-scene .p7{transform-origin:101.7px 831.1px}
.sst-scene .p8{transform-origin:250.2px 831.1px}
.sst-scene .p9{transform-origin:59.7px 632.3px}
.sst-scene .p10{transform-origin:58.8px 635.7px}
.sst-scene .p11{transform-origin:173.4px 641.8px}
.sst-scene .p12{transform-origin:291.1px 635.7px}
.sst-scene .p13{transform-origin:290.2px 632.3px}
.sst-scene .p14{transform-origin:101.6px 423.9px}
.sst-scene .p15{transform-origin:250.2px 423.9px}
.sst-scene .p16{transform-origin:59.7px 225.1px}
.sst-scene .p17{transform-origin:58.8px 228.5px}
.sst-scene .p18{transform-origin:173.4px 234.6px}
.sst-scene .p19{transform-origin:291.1px 228.5px}
.sst-scene .p20{transform-origin:290.2px 225.1px}
.sst__copy{position:relative;z-index:2;margin-top:-100svh;padding:34svh var(--gutter) 92svh;max-width:calc(min(32rem,44vw) + 2 * var(--gutter))}
.sst__copy h2{font-size:clamp(2rem,3.6vw,3.25rem);font-weight:700;line-height:1.05;letter-spacing:-.03em;text-wrap:balance}
.sst__copy p{margin-top:14px;color:var(--sst-dim);text-wrap:pretty}
.sst__copy .sst__link{margin-top:20px}
.sst__copy a{color:var(--sst-mint);font-weight:500}
.sst :focus-visible{outline-color:var(--sst-mint)}
@media (max-width:820px){
  .sst-scene .tower-art{right:auto;left:50%;transform:translateX(-50%);top:42%;height:96%}
  .sst-scene .mid-t{top:52%;height:62%}
  .sst-scene .mid-t.ml{left:calc(50% - 44vw)}
  .sst-scene .mid-t.mr{left:calc(50% + 20vw)}
  .sst__copy{max-width:none;padding:14svh var(--gutter) 96svh}
  .sst__copy p{color:#C6D3CB}
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .sst-scene .plant{animation:sst-grow linear both;animation-timeline:--sst}
    .sst-scene .p0{animation-range:cover 6.0% cover 20.0%}
    .sst-scene .p1{animation-range:cover 7.6% cover 21.6%}
    .sst-scene .p2{animation-range:cover 9.2% cover 23.2%}
    .sst-scene .p3{animation-range:cover 10.8% cover 24.8%}
    .sst-scene .p4{animation-range:cover 12.4% cover 26.4%}
    .sst-scene .p5{animation-range:cover 14.0% cover 28.0%}
    .sst-scene .p6{animation-range:cover 15.6% cover 29.6%}
    .sst-scene .p7{animation-range:cover 17.2% cover 31.2%}
    .sst-scene .p8{animation-range:cover 18.8% cover 32.8%}
    .sst-scene .p9{animation-range:cover 20.4% cover 34.4%}
    .sst-scene .p10{animation-range:cover 22.0% cover 36.0%}
    .sst-scene .p11{animation-range:cover 23.6% cover 37.6%}
    .sst-scene .p12{animation-range:cover 25.2% cover 39.2%}
    .sst-scene .p13{animation-range:cover 26.8% cover 40.8%}
    .sst-scene .p14{animation-range:cover 28.4% cover 42.4%}
    .sst-scene .p15{animation-range:cover 30.0% cover 44.0%}
    .sst-scene .p16{animation-range:cover 31.6% cover 45.6%}
    .sst-scene .p17{animation-range:cover 33.2% cover 47.2%}
    .sst-scene .p18{animation-range:cover 34.8% cover 48.8%}
    .sst-scene .p19{animation-range:cover 36.4% cover 50.4%}
    .sst-scene .p20{animation-range:cover 38.0% cover 52.0%}
    .sst-scene .land-clouds{animation:sst-drift linear both;animation-timeline:--sst;animation-range:cover 0% cover 100%}
  }
}
@keyframes sst-grow{from{transform:scale(.02)}}
@keyframes sst-drift{from{transform:translateX(-3%)}to{transform:translateX(3%)}}

/* ---------- Products: each one gets a full-width scene in its own world ---------- */
.product{position:relative;overflow:clip;isolation:isolate;min-height:max(100svh,640px);display:flex;align-items:center;padding:clamp(64px,10vh,120px) var(--gutter);font-family:"Atkinson Hyperlegible Next",system-ui,sans-serif;view-timeline:--product block}
.product__art{position:absolute;pointer-events:none}
.product__copy{position:relative;z-index:3;max-width:min(30rem,44vw)}
.product__status{display:inline-block;margin:0 0 20px;padding:6px 12px;border-radius:999px;font-size:.8125rem;font-weight:700;letter-spacing:.02em}
.product__body{margin-top:16px;font-size:1.1875rem;line-height:1.55;text-wrap:pretty}
.product__link{margin-top:20px}
.product__link a{font-weight:700}

/* Kindry: the lantern-lit barn fills the screen. The painting loops (kie.ai), the lantern's glow breathes, and dust drifts
   through its beam (motion.js). */
.product--kindry{background:#0c0a09;color:#fafaf9;--lantern-x:84%;--lantern-y:15%;--kindry-focus:70% 50%}
.kindry__loop{inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--kindry-focus,72% 50%);z-index:0}
.product--kindry::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to right,rgba(12,10,9,.94) 0%,rgba(12,10,9,.72) 30%,rgba(12,10,9,0) 58%),
    linear-gradient(to top,rgba(12,10,9,.6),transparent 30%)}
.kindry__glow{z-index:1;left:var(--lantern-x,80%);top:var(--lantern-y,22%);width:min(70vw,1100px);aspect-ratio:1;translate:-50% -50%;
  background:radial-gradient(closest-side,rgba(255,176,76,.34),rgba(255,150,60,.12) 45%,transparent 72%);mix-blend-mode:screen;opacity:.75}
.kindry__dust{z-index:2;inset:0;width:100%;height:100%}
.product--kindry .product__status{color:#fbbf24;box-shadow:inset 0 0 0 1px rgba(251,191,36,.45)}
.kindry__title{font:600 clamp(4rem,9vw,7.5rem)/.95 "IBM Plex Serif",serif;letter-spacing:-.02em}
.kindry__tag{margin-top:14px;font:600 clamp(1.5rem,2.4vw,2rem)/1.2 "IBM Plex Serif",serif;color:#fbbf24}
.product--kindry .product__body{color:#e7e5e4}
.product--kindry a{color:#fbbf24}
.product--kindry :focus-visible{outline-color:#fbbf24}

/* Scuffle: night pitch, field lines, and the gold pennant, large. */
.product--scuffle{background:#0B0A0F;color:#F2EDE8}
.scuffle__field{inset:0;width:100%;height:100%;opacity:.18}
.scuffle__pennant{right:-2%;top:50%;width:min(40vw,600px);translate:0 -50%;rotate:-8deg;filter:drop-shadow(0 30px 60px rgba(0,0,0,.5))}
.product--scuffle .product__status{color:#D4A853;box-shadow:inset 0 0 0 1px rgba(212,168,83,.45)}
.scuffle__title{display:flex;align-items:center;gap:.25em;font:900 clamp(3.5rem,8vw,7rem)/1 "Montserrat",sans-serif;text-transform:uppercase;letter-spacing:.01em}
.scuffle__title svg{width:.9em;height:auto;flex:none}
.scuffle__tag{margin-top:14px;font:700 clamp(1.375rem,2.2vw,1.875rem)/1.25 "Montserrat",sans-serif;color:#D4A853}
.product--scuffle .product__body{color:#C9C3C3}
.product--scuffle a{color:#7EC8E3}
.product--scuffle :focus-visible{outline-color:#D4A853}

@media (max-width:820px){
  .product{align-items:flex-end;min-height:max(100svh,600px)}
  .product__copy{max-width:none}
  .product--kindry::after{background:linear-gradient(to top,rgba(12,10,9,.96) 0%,rgba(12,10,9,.8) 38%,rgba(12,10,9,0) 70%)}
  .kindry__loop{object-position:var(--kindry-focus-m,80% 50%)}
  .product--kindry{--lantern-x:91%;--lantern-y:17%}
  .scuffle__pennant{right:-18%;top:28%;width:92vw}
}
@media (prefers-reduced-motion:no-preference){
  .kindry__glow{animation:lantern 5.3s ease-in-out infinite}
  @supports (animation-timeline:view()){
    .scuffle__pennant{animation:pennant-drift linear both;animation-timeline:--product;animation-range:cover 0% cover 100%}
    .scuffle__field{animation:field-drift linear both;animation-timeline:--product;animation-range:cover 0% cover 100%}
  }
}
/* An uneven flicker: a lantern dims and brightens, it doesn't pulse on a beat. */
@keyframes lantern{0%{opacity:.72}9%{opacity:.86}17%{opacity:.66}31%{opacity:.8}44%{opacity:.7}52%{opacity:.9}63%{opacity:.68}77%{opacity:.84}88%{opacity:.73}100%{opacity:.72}}
@keyframes pennant-drift{from{translate:4vw calc(-50% + 8vh)}to{translate:-4vw calc(-50% - 8vh)}}
@keyframes field-drift{from{translate:0 -5vh}to{translate:0 5vh}}