/* ==========================================================================
   CircuitSynch
   The page is paper. The film is the night it dims for.

   Palette is measured, not picked: #eef0f2 / #0c3f6d / #33b0a2 come off the
   client's own logo, and #0b1722 is the dominant ground of the footage. They
   are the same hue family already, which is why the ground can travel between
   them without the page changing its mind.
   ========================================================================== */

@font-face{font-family:Archivo;font-style:normal;font-weight:300 800;font-display:swap;
  src:url(../public/fonts/archivo-300-800-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:Archivo;font-style:normal;font-weight:300 800;font-display:swap;
  src:url(../public/fonts/archivo-300-800-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(../public/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(../public/fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(../public/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(../public/fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ---- tokens ------------------------------------------------------------ */

:root{
  /* engine overrides. dark is the page's opening state. */
  --sc-canvas:#0b1722;
  --sc-surface:#12242f;
  --sc-ink:#eaf1f4;
  --sc-ink-soft:#9fb4c2;
  --sc-accent:#4fd6c0;
  --sc-accent-ink:#06131b;
  --sc-font-display:Archivo,system-ui,-apple-system,Segoe UI,sans-serif;
  --sc-font-text:Archivo,system-ui,-apple-system,Segoe UI,sans-serif;
  --sc-font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* measured brand */
  --navy:#0c3f6d;
  --blue:#175f8d;
  --teal:#33b0a2;
  --paper:#eef0f2;
  --film:#0b1722;

  /* the mark's gradient, restated per ground */
  --mark-1:#0c3f6d; --mark-2:#175f8d; --mark-3:#33b0a2; --mark-4:#45c48d;

  /* the rails. proportional to the viewport, the way an editorial page is
     set, rather than a centred column that snaps at a breakpoint. */
  --rail:clamp(20px,5.4vw,104px);
  --lead:clamp(20px,6.8vw,124px);
  --colw:min(78rem,100% - var(--rail) * 2);

  --ease:cubic-bezier(.22,1,.36,1);
  --grain:.05;
}

/* light ground. the token AND color, together: `color` resolves on body as a
   computed value, so re-inking a subtree needs both or the type stays pale. */
.paper{
  --sc-ink:#0d1c2b;
  --sc-ink-soft:#3f5566;
  --sc-accent:#0e7267;
  --sc-accent-ink:#f4f8f8;
  --sc-surface:#e2e8eb;
  --mark-1:#0c3f6d; --mark-2:#175f8d; --mark-3:#2b9d91; --mark-4:#36a97b;
  color:var(--sc-ink);
}

/* ---- base -------------------------------------------------------------- */

body{font-family:var(--sc-font-text);font-synthesis-weight:none;}
::selection{background:var(--sc-accent);color:var(--sc-accent-ink);}
:where(a){color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em;}
:focus-visible{outline:2px solid var(--sc-accent);outline-offset:3px;border-radius:2px;}

.sc-grain{
  opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  transition:opacity .5s linear;
}

.skip{
  position:fixed;top:0;left:0;z-index:40;transform:translateY(-120%);
  background:var(--sc-accent);color:var(--sc-accent-ink);
  padding:.7rem 1.1rem;font-weight:600;font-size:.9rem;
}
.skip:focus{transform:none;}

/* ---- the bar ----------------------------------------------------------- */

.bar{
  position:fixed;inset:0 0 auto 0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:clamp(.85rem,1.9vh,1.5rem) var(--rail);
  color:var(--bar-ink,#eaf1f4);
  transition:opacity .45s var(--ease),color .38s linear;
  pointer-events:none;
}
.bar > *{pointer-events:auto;}
.bar--hush{opacity:0;}

.bar__mark{display:flex;align-items:center;gap:.62rem;text-decoration:none;}
.mark{width:clamp(26px,2.4vw,34px);height:auto;display:block;flex:none;}
.bar__word,.plate__word,.foot__word{
  font-family:var(--sc-font-display);
  font-weight:300;letter-spacing:-.005em;
  font-size:clamp(.92rem,1.08vw,1.06rem);
  white-space:nowrap;
}
.bar__word b,.plate__word b,.foot__word b{font-weight:700;letter-spacing:-.02em;}

.bar__cta{
  font-size:clamp(.86rem,1vw,.95rem);font-weight:500;
  text-decoration:none;padding:.5rem .1rem;
  border-bottom:1px solid currentColor;
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .bar__cta:hover{color:var(--sc-accent);border-color:var(--sc-accent);}
}

/* ==========================================================================
   ACT 1 · the film, ACT 2 · the room. both scrub acts share this system:
   .film / .film__stage / .film__copy / .msg. The room adds .msg--svc below.
   ========================================================================== */

.film__stage{background:#06111a;}
.film__stage video,.film__stage .sc-stage__poster{object-position:50% 46%;}

/* A corner of density where the copy sits, not a sheet over the picture. The
   peak lands on the brightest frame in the sequence, so the corner carries a
   little more weight than the measured minimum: 4.0:1 clears the large-text
   floor but the most important line on the page should not sit at the floor. */
.film .sc-scrim--lead{--sc-scrim-a:95%;}
/* The copy box now runs to ~72% of the width (the revised lines are twice as
   long) and the fork sits on the substation frame, whose container windows
   glow under the accent lines, so the floor reaches further right and holds
   more density through its middle than the first build needed. */
.film__floor{
  position:absolute;inset:auto 0 0 0;height:68%;z-index:1;pointer-events:none;
  background:linear-gradient(to top,
    rgba(5,14,21,.93) 0%,rgba(5,14,21,.84) 22%,rgba(5,14,21,.62) 46%,rgba(5,14,21,.26) 72%,transparent 100%);
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 58%,transparent 94%);
  mask-image:linear-gradient(to right,#000 0%,#000 58%,transparent 94%);
}
.film__vig{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(118% 78% at 50% 42%,transparent 44%,rgba(4,12,18,.52) 100%);
}
/* The stage's bottom edge fades into the page canvas. While the film is
   pinned the canvas is the film's own night, so this is invisible. When the
   stage slides off over the paper the canvas is drifting from night to paper
   underneath it, so the edge always lands on its own colour and dissolves
   instead of cutting a dark sheet against a light one. */
.film__stage::after{
  content:"";position:absolute;inset:auto 0 0 0;z-index:1;pointer-events:none;
  height:clamp(96px,18vh,200px);
  background:linear-gradient(to bottom,transparent,var(--sc-canvas));
}

.film__copy{
  position:absolute;z-index:2;
  left:var(--lead);right:var(--rail);
  bottom:clamp(3.4rem,13.5vh,8.6rem);
  max-width:min(58rem,74vw);
}
.msg{
  position:absolute;left:0;right:0;bottom:0;
  opacity:0;will-change:opacity,transform;
}
.msg__line{
  margin:0;font-family:var(--sc-font-display);
  font-weight:600;
  font-size:clamp(1.95rem,5vw,4.6rem);
  line-height:.99;letter-spacing:-.038em;
  text-wrap:balance;
  color:#f2f7f9;
}
/* A kinetic line breaks where the measured line box breaks, so the measure is
   what sets the break. The opening is one long observation and a verdict; at
   24ch on the copy box it lands in three lines on every desktop width. */
.msg--open.msg__line{max-width:24ch;font-size:clamp(2rem,4.6vw,4.2rem);}
.msg--peak.msg__line{max-width:23ch;font-size:clamp(1.95rem,4.9vw,4.8rem);}
/* The two plain observations (cues 2 and 3) are the longest lines in the film
   and carry a hard break each. A step below the emphatic cues keeps them at
   three lines inside the same measure. */
.msg.msg__line:not(.msg--open):not(.msg--peak){font-size:clamp(1.95rem,3.4vw,3.2rem);}

/* 1 · the tracking settles as the first frames move. a controlled change,
   once, on the one headline that is on screen before anything is scrolled. */
.msg--open.msg__line{
  --o:clamp(0,calc((var(--sc-p,0) - .006) / .085),1);
  letter-spacing:calc(-.038em + .034em * (1 - var(--o)));
}

/* 4 · the fork. the rule between the question and its two answers grows as
   the message lands, which is the only thing on the page that draws itself.
   Keyed to the fork's cue window (0.575–0.76): full opacity arrives at ~0.605
   and the rule draws itself across the next 0.065 of the act. */
.msg--fork .msg__line--alt{color:var(--sc-accent);}
.msg__rule{
  --f:clamp(0,calc((var(--sc-p,0) - .59) / .065),1);
  display:block;height:1px;margin:.42em 0 .38em;
  background:currentColor;opacity:.42;
  transform:scaleX(var(--f));transform-origin:left center;
  width:min(22rem,54%);
}

/* ---- act 2 · the room. The window across the top of the frame is bright
   daylight for most of the clip and the bar's ink is light, so the room gets
   a short band of night along its top edge. Nothing else about the frame
   changes; the floor below is the film's. */
.film--room .film__stage::before{
  content:"";position:absolute;inset:0 0 auto 0;z-index:1;pointer-events:none;
  height:clamp(120px,22vh,220px);
  background:linear-gradient(to bottom,rgba(6,17,26,.82) 0%,rgba(6,17,26,.5) 45%,transparent 100%);
}
/* ---- act 2 · the room. one line of work per cue: the name at display
   size, its field on a mono spec line, the way the range cards used to be
   labelled. The combined first cue carries two names on two lines. */
.msg--svc .msg__line{font-size:clamp(1.95rem,4.2vw,4rem);}
.msg--svc .msg__line + .msg__line{margin-top:.08em;}
.msg__spec{
  margin:.55em 0 0;font-family:var(--sc-font-mono);
  font-size:clamp(.72rem,.9vw,.86rem);letter-spacing:.09em;
  color:var(--sc-accent);
}

/* the analyses inside the room: a document set over the model's charts.
   A heading at the service size with its paragraph, then two pages of three
   analyses, each a name and one line, three across on a desktop and stacked
   on a phone. Same measure as every other message. */
.msg--doc .msg__line{font-size:clamp(1.75rem,3.6vw,3.4rem);}
.msg__p{
  margin:.6em 0 0;max-width:54ch;
  font-size:clamp(.98rem,1.14vw,1.18rem);line-height:1.55;
  color:#d7e2e8;text-wrap:pretty;
}
.msg--list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.2rem clamp(1.2rem,2.4vw,2.4rem);
}
.msg__item{
  padding-top:.85rem;
  border-top:1px solid rgba(234,241,244,.28);
}
.msg__item h4{
  margin:0 0 .35rem;font-family:var(--sc-font-display);
  font-weight:600;font-size:clamp(1.05rem,1.34vw,1.36rem);
  letter-spacing:-.02em;line-height:1.2;color:#f2f7f9;
}
.msg__item p{
  margin:0;font-size:clamp(.9rem,1vw,1.02rem);line-height:1.5;
  color:#d7e2e8;text-wrap:pretty;
}

/* 6 · the end plate. the film names the firm, centred, over the star field. */
/* driven from --sc-p rather than a cue: the verification pass hides every
   [data-sc-cue] and its subtree to photograph the frame beneath the copy, so a
   scrim that carries a cue attribute is hidden along with the thing it exists
   to protect, and reports a failure it is actually preventing. */
.plate__ground{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:clamp(0,calc((var(--sc-p,0) - .922) / .038),1);
  background:radial-gradient(46% 30% at 50% 50%,
    rgba(4,12,18,.94) 0%,rgba(4,12,18,.80) 40%,rgba(4,12,18,.34) 70%,transparent 100%);
}
.msg--plate{
  position:absolute;z-index:2;left:0;right:0;
  /* bottom:auto, or the .msg base (bottom:0) stretches the box from 50% to the
     floor and the word lands at a quarter height, outside its own ground. */
  top:50%;bottom:auto;translate:0 -50%;
  display:flex;flex-direction:column;align-items:center;gap:.7rem;
  text-align:center;opacity:0;
}
.plate__word{font-size:clamp(1.4rem,3.5vw,2.9rem);letter-spacing:.01em;}
.plate__word b{letter-spacing:-.012em;}
.plate__sub{
  font-family:var(--sc-font-mono);font-size:clamp(.66rem,.82vw,.78rem);
  letter-spacing:.2em;color:var(--sc-ink-soft);
}

/* ==========================================================================
   ACT 3 · the close. the last thing, and it holds.
   ========================================================================== */

.close{
  min-height:100svh;
  display:grid;grid-template-rows:1fr auto;
  padding:calc(var(--rail) + 4rem) var(--rail) var(--rail);
  row-gap:clamp(2rem,5vh,4rem);
  background:
    radial-gradient(58% 50% at var(--sc-mx,50%) var(--sc-my,42%),
      rgba(79,214,192,.13) 0%,transparent 68%),
    linear-gradient(180deg,#0c1b25 0%,#09161f 100%);
}
.close__in{
  width:var(--colw);margin-inline:auto;
  align-self:center;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  align-items:center;gap:clamp(2rem,5vw,5rem);
}
.close__copy{max-width:46rem;}
.close__fig{
  margin:0;border-radius:4px;overflow:hidden;
  box-shadow:0 1px 2px rgba(3,12,18,.5),0 18px 48px rgba(3,12,18,.45);
  outline:1px solid rgba(255,255,255,.08);outline-offset:-1px;
}
.close__img{display:block;width:100%;height:auto;aspect-ratio:1600/893;object-fit:cover;}
.close__h{
  margin:0 0 clamp(1.6rem,3.6vh,2.6rem);font-family:var(--sc-font-display);
  font-weight:600;font-size:clamp(1.9rem,4.2vw,4rem);
  line-height:1.02;letter-spacing:-.036em;text-wrap:balance;
  max-width:20ch;
}
.close__act{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem 2rem;}
.cta{
  display:inline-block;flex:none;
  background:var(--sc-accent);color:var(--sc-accent-ink);
  font-weight:600;font-size:1rem;letter-spacing:-.008em;
  padding:.92rem 1.9rem;border-radius:3px;text-decoration:none;
  box-shadow:0 1px 2px rgba(3,12,18,.4),0 6px 18px rgba(3,12,18,.28);
  transition:background .16s var(--ease),transform .12s var(--ease);
}
@media (hover:hover) and (pointer:fine){ .cta:hover{background:#68e2ce;} }
.cta:active{transform:translateY(1px);}
.close__docs{
  margin:0;max-width:36ch;color:var(--sc-ink-soft);
  font-size:.9rem;line-height:1.56;text-wrap:pretty;
}

.foot{
  width:var(--colw);margin-inline:auto;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.8rem;
  padding-top:1.3rem;
  border-top:1px solid rgba(255,255,255,.12);
  color:var(--sc-ink-soft);
  font-family:var(--sc-font-display);font-size:.9rem;letter-spacing:.012em;
}
.foot__word{color:var(--sc-ink);font-size:1rem;}
/* the mark's own second line: caps, tracked, in the mark's teal */
.foot__c{
  font-weight:500;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mark-3);
}
.foot__l{
  color:var(--sc-ink);font-weight:400;text-decoration:none;
  border-bottom:1px solid color-mix(in oklab,currentColor 28%,transparent);
  padding-bottom:.08em;
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.foot__c + .foot__l{margin-left:auto;}
.foot__l--tel{white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:.03em;}
@media (hover:hover) and (pointer:fine){ .foot__l:hover{color:var(--sc-accent);border-color:var(--sc-accent);} }
/* the address takes the whole second row, set like the rest of the footer:
   the element's own italic is a browser default, not a decision. */
.foot__addr{
  flex-basis:100%;margin-top:.1rem;
  font-style:normal;font-size:.84rem;line-height:1.5;letter-spacing:.01em;
  color:color-mix(in oklab,var(--sc-ink-soft) 82%,transparent);
  text-wrap:pretty;
}

/* ==========================================================================
   mobile. the same story, composed for the shape of the screen rather than
   shrunk into it.
   ========================================================================== */

@media (width <= 720px){
  /* both corner anchors become a band at this width: a corner gradient can no
     longer cover copy that now spans the frame. */
  .film__copy{
    left:var(--rail);right:var(--rail);
    bottom:clamp(2.2rem,9vh,4.2rem);
    max-width:none;
  }
  .film .sc-scrim--lead{
    background:linear-gradient(to top,
      rgba(6,17,26,.94) 0%,rgba(6,17,26,.82) 26%,
      rgba(6,17,26,.42) 52%,transparent 74%);
  }
  /* the corner becomes a band, so the floor loses its right-hand taper */
  .film__floor{-webkit-mask-image:none;mask-image:none;height:56%;}
  /* the end plate spans the whole phone width, so its ground does too */
  .plate__ground{
    background:radial-gradient(74% 30% at 50% 50%,
      rgba(4,12,18,.95) 0%,rgba(4,12,18,.84) 44%,rgba(4,12,18,.4) 74%,transparent 100%);
  }
  .film__stage video,.film__stage .sc-stage__poster{object-position:50% 42%;}
  /* the desktop floor is a desktop floor: at 390px it wraps to six lines */
  .msg__line{font-size:clamp(1.62rem,7.4vw,2.5rem);letter-spacing:-.03em;line-height:1.06;}
  .msg--open.msg__line{max-width:none;font-size:clamp(1.55rem,7vw,2.5rem);}
  .msg--peak.msg__line{font-size:clamp(1.72rem,8vw,2.7rem);}
  .msg--svc .msg__line{font-size:clamp(1.55rem,7vw,2.4rem);}
  .msg__spec{font-size:.7rem;letter-spacing:.07em;}
  .msg--doc .msg__line{font-size:clamp(1.4rem,6vw,2.1rem);}
  .msg__p{font-size:.92rem;line-height:1.5;margin-top:.5em;}
  .msg--list{grid-template-columns:1fr;gap:.7rem;}
  .msg__item{padding-top:.55rem;}
  .msg__item h4{font-size:1rem;margin-bottom:.2rem;}
  .msg__item p{font-size:.86rem;line-height:1.45;}
  /* the plain observations: at phone width the measure sets the break, not
     the desktop's hard one, and the size steps down so each holds in four. */
  .msg.msg__line:not(.msg--open):not(.msg--peak){font-size:clamp(1.3rem,6.4vw,2.1rem);}
  /* the break becomes a word space, not nothing: display:none would glue
     "santralinizin" to "bağlantı". Verified in Chrome. */
  .msg.msg__line:not(.msg--open):not(.msg--peak) br{display:inline;content:"";}
  .msg.msg__line:not(.msg--open):not(.msg--peak) br::after{content:" ";}
  .msg__rule{width:min(14rem,62%);}


  .close__in{grid-template-columns:1fr;gap:1.6rem;}
  .close__fig{order:-1;}
  .close__act{gap:1.1rem;}
  .cta{width:100%;text-align:center;padding-block:1.05rem;}
  .foot__c + .foot__l{margin-left:0;}
  .foot{flex-direction:column;align-items:flex-start;gap:.35rem;}
  /* in a column, flex-basis is height: the address takes width instead */
  .foot__addr{flex-basis:auto;width:100%;margin-top:.3rem;}
}

@media (width <= 420px){
  .bar__word{font-size:.84rem;}
  .plate__sub{letter-spacing:.14em;}
}

/* ==========================================================================
   reduced motion. fewer and gentler, not zero: the opacity that carries the
   reading stays, every position change goes.
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .msg--open.msg__line{letter-spacing:-.038em;}
  .msg__rule{transform:none;}
  /* No clip is ever fetched here, so the poster holds for the whole act and
     the end plate lands on the brightest frame in the sequence instead of the
     star field it was composed against. Same plate, the ground it needs. */
  .plate__ground{
    background:
      radial-gradient(58% 38% at 50% 50%,rgba(4,12,18,.97) 0%,rgba(4,12,18,.93) 58%,rgba(4,12,18,.88) 100%),
      linear-gradient(rgba(4,12,18,.88),rgba(4,12,18,.88));
  }
  .sc-grain{opacity:0;}
}