/*
Theme Name: Digitsols
Theme URI: https://digitsols.com
Author: Digitsols
Author URI: https://digitsols.com
Description: Bespoke standalone theme for digitsols.com, pixel-locked to the approved design. CSS copied verbatim from the reference; Commissioner self-hosted; no page builder, no external font CDN.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: Proprietary
Text Domain: digitsols
*/

/* Commissioner — self-hosted (latin, latin-ext, greek) x weights 200-900. Downloaded from Google Fonts css2, woff2 verbatim. */
@font-face{font-family:'Commissioner';font-style:normal;font-weight:200;font-display:swap;src:url('assets/fonts/commissioner-latin-200.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:'Commissioner';font-style:normal;font-weight:200;font-display:swap;src:url('assets/fonts/commissioner-latin-ext-200.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:'Commissioner';font-style:normal;font-weight:200;font-display:swap;src:url('assets/fonts/commissioner-greek-200.woff2') format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
@font-face{font-family:'Commissioner';font-style:normal;font-weight:300;font-display:swap;src:url('assets/fonts/commissioner-latin-300.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:'Commissioner';font-style:normal;font-weight:300;font-display:swap;src:url('assets/fonts/commissioner-latin-ext-300.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:'Commissioner';font-style:normal;font-weight:300;font-display:swap;src:url('assets/fonts/commissioner-greek-300.woff2') format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
@font-face{font-family:'Commissioner';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/commissioner-latin-400.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:'Commissioner';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/commissioner-latin-ext-400.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:'Commissioner';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/commissioner-greek-400.woff2') format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
@font-face{font-family:'Commissioner';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/commissioner-latin-500.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:'Commissioner';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/commissioner-latin-ext-500.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:'Commissioner';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/commissioner-greek-500.woff2') format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
@font-face{font-family:'Commissioner';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/commissioner-latin-600.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:'Commissioner';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/commissioner-latin-ext-600.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:'Commissioner';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/commissioner-greek-600.woff2') format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
@font-face{font-family:'Commissioner';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/commissioner-latin-700.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:'Commissioner';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/commissioner-latin-ext-700.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:'Commissioner';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/commissioner-greek-700.woff2') format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
@font-face{font-family:'Commissioner';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/commissioner-latin-800.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:'Commissioner';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/commissioner-latin-ext-800.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:'Commissioner';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/commissioner-greek-800.woff2') format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
@font-face{font-family:'Commissioner';font-style:normal;font-weight:900;font-display:swap;src:url('assets/fonts/commissioner-latin-900.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:'Commissioner';font-style:normal;font-weight:900;font-display:swap;src:url('assets/fonts/commissioner-latin-ext-900.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:'Commissioner';font-style:normal;font-weight:900;font-display:swap;src:url('assets/fonts/commissioner-greek-900.woff2') format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}

/* ==========================================================
   Digitsols homepage
   Type: Commissioner only (variable 200-900). Chosen because it
   was drawn with Greek as a first-class script, so Latin and
   Greek share one skeleton, one weight range and one rhythm.
   Colour and geometry are taken from the ds mark.
   ========================================================== */
:root{
  --paper:#E9EBE8;
  --paper-2:#DFE3DF;
  --ink:#0F181D;
  --ink-2:#16232A;
  --muted:#5C6A70;

  --cyan:#00CEDD;
  --cyan-d:#00919F;
  --slate:#4A6394;

  --rule:rgba(15,24,29,.15);
  --rule-2:rgba(15,24,29,.32);
  --rule-inv:rgba(233,235,232,.2);

  --f:"Commissioner",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;

  --e:cubic-bezier(.2,.8,.25,1);
  --e2:cubic-bezier(.16,1,.3,1);

  --gut:clamp(20px,5vw,72px);
  --pad:clamp(60px,7.5vw,116px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f);font-weight:400;
  font-size:clamp(15.5px,.4vw + 14.5px,17.5px);
  line-height:1.58;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--cyan);color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.wrap{width:min(1400px,100% - (var(--gut)*2));margin-inline:auto}
.sec{padding-block:var(--pad);border-top:1px solid var(--rule);position:relative}
.sec:first-of-type{border-top:0}

.skip{position:absolute;left:10px;top:-90px;z-index:300;background:var(--ink);color:var(--paper);
  padding:11px 16px;font-size:13px;transition:top .2s}
.skip:focus{top:10px}

/* ---------- type roles, all one family ---------- */
.d1{font-weight:800;font-size:clamp(2.4rem,6vw,5.2rem);line-height:.98;letter-spacing:-.038em;text-wrap:balance}
.d2{font-weight:800;font-size:clamp(1.85rem,3.9vw,3.3rem);line-height:1.02;letter-spacing:-.032em;text-wrap:balance}
.d3{font-weight:700;font-size:clamp(1.18rem,1.75vw,1.55rem);line-height:1.1;letter-spacing:-.024em}
.d4{font-weight:700;font-size:clamp(1rem,1.2vw,1.15rem);line-height:1.18;letter-spacing:-.016em}

/* Greek needs a touch more room at display sizes: accents sit high and
   uppercase is wider, so tracking is relaxed when the page is in Greek. */
html[lang="el"] .d1{letter-spacing:-.028em;line-height:1.02}
html[lang="el"] .d2{letter-spacing:-.024em;line-height:1.06}
html[lang="el"] .d3,html[lang="el"] .d4{letter-spacing:-.014em}
html[lang="el"] .lbl{letter-spacing:.13em}

.lbl{font-weight:500;font-size:clamp(11px,.78vw,12.5px);letter-spacing:.17em;text-transform:uppercase;
  color:var(--muted)}
.lbl b{font-weight:500;color:var(--cyan-d)}

.read{font-size:clamp(1rem,.45vw + .9rem,1.17rem);line-height:1.55;color:var(--muted);max-width:56ch}
.read strong{color:var(--ink);font-weight:600}

/* ---------- controls ---------- */
.act{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 24px;
  background:var(--ink);color:var(--paper);font-weight:600;font-size:14px;letter-spacing:.01em;
  overflow:hidden;isolation:isolate}
.act > *{position:relative;z-index:2}
.act::before{content:"";position:absolute;inset:0;z-index:1;background:var(--cyan);
  transform:translateY(100%);transition:transform .4s var(--e)}
.act:hover::before,.act:focus-visible::before{transform:translateY(0)}
.act:hover,.act:focus-visible{color:var(--ink)}
.act .tip{transition:transform .4s var(--e)}
.act:hover .tip{transform:translateX(4px)}
.act.inv{background:var(--paper);color:var(--ink)}
.act.line{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px var(--rule-2)}
.dark .act.line{box-shadow:inset 0 0 0 1px var(--rule-inv)}

.tlink{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:14px;padding-block:6px;
  box-shadow:inset 0 -1px 0 0 var(--rule-2);transition:box-shadow .3s var(--e)}
.tlink:hover{box-shadow:inset 0 -1px 0 0 currentColor}
.tlink .tip{transition:transform .35s var(--e)}
.tlink:hover .tip{transform:translateX(4px)}

/* ---------- header ---------- */
.bar{position:fixed;left:0;right:0;top:0;z-index:140;background:rgba(233,235,232,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;transition:border-color .35s var(--e)}
.bar.on{border-bottom-color:var(--rule)}
.bar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:clamp(10px,1.2vw,16px)}
.sig{display:flex;align-items:center;gap:11px}
.sig img{height:clamp(24px,2.4vw,30px);width:auto}
.sig b{font-weight:700;font-size:14px;letter-spacing:.2em;text-transform:uppercase}
@media (max-width:420px){.sig b{display:none}}

.menu{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.menu a{position:relative;font-weight:500;font-size:14.5px;color:var(--muted);padding-block:4px;
  transition:color .3s var(--e)}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:right;transition:transform .38s var(--e)}
.menu a:hover,.menu a[aria-current="true"],.menu a[aria-current="page"]{color:var(--ink)}
.menu a:hover::after,.menu a[aria-current="true"]::after,.menu a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}

.tools{display:flex;align-items:center;gap:10px}
.lang{display:flex;align-items:center;box-shadow:inset 0 0 0 1px var(--rule-2);height:38px}
.lang button{padding:0 11px;height:100%;font-weight:600;font-size:12.5px;letter-spacing:.08em;
  color:var(--muted);transition:background-color .3s var(--e),color .3s var(--e)}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.bar .act{min-height:38px;padding:0 16px;font-size:13px}

.hamb{display:none;position:relative;width:44px;height:38px;box-shadow:inset 0 0 0 1px var(--rule-2)}
.hamb i{position:absolute;left:50%;top:50%;width:16px;height:1.5px;margin-left:-8px;background:var(--ink);
  transition:transform .4s var(--e),opacity .25s}
.hamb i:nth-child(1){transform:translateY(-5px)}
.hamb i:nth-child(3){transform:translateY(5px)}
.hamb[aria-expanded="true"] i:nth-child(1){transform:rotate(45deg)}
.hamb[aria-expanded="true"] i:nth-child(2){opacity:0}
.hamb[aria-expanded="true"] i:nth-child(3){transform:rotate(-45deg)}
.prog{position:absolute;left:0;bottom:-1px;height:1px;background:var(--cyan-d);width:0}
@media (max-width:1040px){.menu,.bar .act{display:none}.hamb{display:block}}

.drawer{position:fixed;inset:0;z-index:139;background:var(--paper);
  padding:calc(clamp(10px,1.2vw,16px)*2 + 44px + var(--gut)) var(--gut) var(--gut);
  display:flex;flex-direction:column;clip-path:inset(0 0 100% 0);
  transition:clip-path .55s var(--e);visibility:hidden}
.drawer.open{clip-path:inset(0 0 0 0);visibility:visible}
.drawer ol{margin-top:auto;border-top:1px solid var(--rule)}
.drawer li{border-bottom:1px solid var(--rule)}
.drawer a{display:block;padding:clamp(11px,2.6vw,17px) 2px;font-weight:800;
  font-size:clamp(1.55rem,7vw,2.3rem);letter-spacing:-.035em;
  opacity:0;transform:translateY(12px);
  transition:opacity .4s var(--e) var(--d,0ms),transform .45s var(--e) var(--d,0ms)}
.drawer.open a{opacity:1;transform:none}
.drawer .base{margin-top:24px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
@media (min-width:1041px){.drawer{display:none}}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .75s var(--e2),transform .75s var(--e2)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.08s}
.rv[data-d="2"]{transition-delay:.16s}
.rv[data-d="3"]{transition-delay:.24s}

.head{display:grid;gap:clamp(14px,2.2vw,34px);margin-bottom:clamp(30px,4vw,58px)}
@media (min-width:940px){.head{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:end}}
.head .lbl{margin-bottom:14px}

/* ==========================================================
   Cover
   ========================================================== */
.cover{padding-top:clamp(96px,13vh,158px);padding-bottom:clamp(36px,5vw,68px)}
.cover-top{display:grid;gap:clamp(26px,3.6vw,50px)}
@media (min-width:1080px){.cover-top{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  align-items:center;gap:clamp(34px,4vw,70px)}}
.cover h1{margin-block:clamp(14px,1.8vw,22px) clamp(18px,2.2vw,26px)}
.cover-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,2.8vw,34px)}

/* construction drawing — every figure is measured off the artwork */
.build{position:relative;width:100%}
.build svg{width:100%;height:auto;display:block;overflow:visible}
.build .ln{fill:none;stroke:var(--rule-2);stroke-width:1;vector-effect:non-scaling-stroke}
.build .key{stroke:var(--ink);stroke-width:1.3}
.build .dash{stroke-dasharray:4 5}
.build text{font-family:var(--f);font-weight:500;font-size:11.5px;letter-spacing:.12em;
  fill:var(--muted);text-transform:uppercase}
.build .art{opacity:0;transition:opacity .85s var(--e2) .4s}
.loaded .build .art{opacity:1}
.build .draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.3s var(--e2) var(--dly,0s)}
.loaded .build .draw{stroke-dashoffset:0}
.build .fade{opacity:0;transition:opacity .65s var(--e) 1s}
.loaded .build .fade{opacity:1}
/* hover the artwork to replay the build (wired in site.js): .replay snaps
   every animated figure back to its start with no transition, then JS drops
   the class and the base transitions redraw it. */
.build{cursor:pointer}
.build.replay .draw{stroke-dashoffset:var(--len);transition:none}
.build.replay .fade{opacity:0;transition:none}
.build.replay .art{opacity:0;transition:none}

.scope{margin-top:clamp(34px,4.4vw,64px);border-top:1px solid var(--rule);display:grid}
@media (min-width:820px){.scope{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1.12fr)}}
.scope li{padding:20px 26px 22px 0;border-bottom:1px solid var(--rule)}
@media (min-width:820px){.scope li{border-bottom:0;border-right:1px solid var(--rule);padding-left:26px}
  .scope li:first-child{padding-left:0}.scope li:last-child{border-right:0}}
.scope .lbl{display:block;margin-bottom:8px}

/* ==========================================================
   Clients — real logos from the existing site
   ========================================================== */
.clients{background:var(--paper-2);padding-block:clamp(34px,4.2vw,60px)}
.cl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:clamp(24px,3vw,40px)}
@media (min-width:560px){.cl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.cl-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:1200px){.cl-grid{grid-template-columns:repeat(7,minmax(0,1fr))}}
.cl{background:#fff;min-height:clamp(84px,8.6vw,118px);min-width:0;display:grid;place-items:center;padding:clamp(14px,1.6vw,22px);
  transition:background-color .4s var(--e)}
.cl[data-dark]{background:var(--ink-2)}
.cl img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1);opacity:.68;transition:filter .45s var(--e),opacity .45s var(--e),transform .5s var(--e)}
.cl:hover img{filter:none;opacity:1;transform:scale(1.05)}

/* ==========================================================
   Services
   ========================================================== */
.svcs{display:grid;gap:clamp(28px,3.6vw,48px)}
@media (min-width:900px){
  .svcs{grid-template-columns:minmax(0,1.14fr) minmax(0,.95fr) minmax(0,.91fr);gap:clamp(22px,2.8vw,44px);align-items:start}
  .svcs > :nth-child(2){margin-top:clamp(26px,4.5vw,72px)}
  .svcs > :nth-child(3){margin-top:clamp(52px,9vw,144px)}
}
.svc{padding-top:18px;border-top:1px solid var(--rule-2);position:relative;min-width:0}
.svc::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--cyan);
  transition:width .55s var(--e)}
.svc:hover::before{width:100%}
.svc .no{display:flex;justify-content:space-between;gap:12px;margin-bottom:clamp(16px,2.2vw,26px)}
.svc h3{margin:clamp(14px,1.8vw,20px) 0 10px}
.svc p{font-size:1rem;line-height:1.52;color:var(--muted)}
.svc .spec{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.svc .spec li{font-weight:500;font-size:12.5px;padding:5px 10px;box-shadow:inset 0 0 0 1px var(--rule)}

.form{width:100%;aspect-ratio:3/2;background:var(--paper-2);display:grid;place-items:center;
  transition:background-color .45s var(--e)}
.svc:hover .form{background:var(--cyan)}
.form svg{width:70%;height:auto}
.form .o{fill:none;stroke:var(--ink);stroke-width:1.4;vector-effect:non-scaling-stroke}
.form .s{fill:var(--ink)}
.form .faint{opacity:.3}

/* ==========================================================
   Case studies
   ========================================================== */
.work{display:grid;gap:clamp(24px,3.2vw,48px)}
@media (min-width:880px){
  .work{grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(22px,2.8vw,44px) clamp(22px,2.8vw,40px)}
  .work .job:nth-child(1){grid-column:1 / 8}
  .work .job:nth-child(2){grid-column:9 / 13;margin-top:clamp(34px,6vw,96px)}
  .work .job:nth-child(3){grid-column:1 / 6}
  .work .job:nth-child(4){grid-column:7 / 13;margin-top:clamp(16px,2.4vw,44px)}
}
.job{display:block;min-width:0}
.plate{position:relative;background:#fff;box-shadow:inset 0 0 0 1px var(--rule);overflow:hidden;
  display:grid;place-items:center;padding:clamp(24px,4vw,56px);
  transition:transform .6s var(--e2),box-shadow .5s var(--e)}
.job:hover .plate{transform:translateY(-5px);box-shadow:inset 0 0 0 1px var(--rule-2),0 22px 44px -30px rgba(15,24,29,.5)}
.work .job:nth-child(1) .plate{aspect-ratio:16/10}
.work .job:nth-child(2) .plate{aspect-ratio:4/5}
.work .job:nth-child(3) .plate{aspect-ratio:5/4}
.work .job:nth-child(4) .plate{aspect-ratio:16/9;background:var(--ink-2)}
.plate img{max-width:min(58%,240px);max-height:100%;width:auto;height:auto;transition:transform .7s var(--e2)}
.job:hover .plate img{transform:scale(1.05)}
.plate::after{content:"";position:absolute;inset:auto auto 0 0;width:38%;height:1px;background:var(--cyan);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--e)}
.job:hover .plate::after{transform:scaleX(1)}
.job .meta{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-top:14px;margin-top:14px;border-top:1px solid var(--rule-2)}
.job .go{color:var(--muted);white-space:nowrap;font-weight:600;font-size:13.5px;transition:color .3s var(--e)}
.job:hover .go{color:var(--ink)}
.job .go .tip{display:inline-block;transition:transform .35s var(--e)}
.job:hover .go .tip{transform:translateX(4px)}

/* ==========================================================
   Why us — cyan
   ========================================================== */
.flood{background:var(--cyan);border-top:1px solid var(--rule-2)}
.why-top{display:grid;gap:clamp(26px,3.2vw,48px)}
@media (min-width:940px){.why-top{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  column-gap:clamp(36px,5vw,100px);align-items:end}}
.claim{max-width:17ch}
.qt{padding-top:18px;border-top:1px solid rgba(15,24,29,.32)}
.qt blockquote{font-weight:500;font-size:clamp(1.08rem,1.7vw,1.42rem);line-height:1.34;
  letter-spacing:-.012em;max-width:28ch}
.qt .who{display:flex;align-items:center;gap:14px;margin-top:16px}
.qt .who img{width:74px;height:auto;filter:brightness(0);opacity:.82}
.qt .who span{font-weight:600;font-size:13.5px;color:rgba(15,24,29,.7)}
.notes{display:grid;gap:clamp(24px,3vw,42px);margin-top:clamp(34px,4.2vw,62px)}
@media (min-width:760px){.notes{grid-template-columns:1.05fr .95fr;column-gap:clamp(36px,5.5vw,100px)}
  .notes > :nth-child(even){margin-top:clamp(16px,2.6vw,40px)}}
.note{padding-top:15px;border-top:1px solid rgba(15,24,29,.32);position:relative}
.note::before{content:"";position:absolute;left:0;top:-1px;width:0;height:1px;background:var(--ink);
  transition:width .95s var(--e2)}
.note.in::before{width:100%}
.note h3{margin-bottom:8px}
.note p{font-size:1rem;line-height:1.5;color:rgba(15,24,29,.76)}

/* ==========================================================
   Team
   ========================================================== */
.team{display:grid;gap:clamp(22px,2.6vw,34px);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:700px){.team{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.team{grid-template-columns:repeat(6,minmax(0,1fr))}
  .team > :nth-child(even){margin-top:clamp(18px,2.4vw,38px)}}
.mate{min-width:0}
.mate figure{position:relative;aspect-ratio:1;background:var(--paper-2);overflow:hidden}
.mate img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.03);
  transition:filter .5s var(--e),transform .7s var(--e2)}
.mate:hover img{filter:none;transform:scale(1.04)}
.mate h3{margin:14px 0 3px}
.mate p{font-size:13.5px;line-height:1.35;color:var(--muted)}

/* ==========================================================
   Stack — the tools from "Our left hands"
   ========================================================== */
.stack{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(13px,1.7vw,24px);margin-top:22px}
.stack li{min-width:0}
.stack img{height:clamp(40px,4.6vw,60px);width:auto;filter:grayscale(1);opacity:.55;
  transition:filter .4s var(--e),opacity .4s var(--e)}
.stack li:hover img{filter:none;opacity:1}

/* ==========================================================
   Method
   ========================================================== */
.axis{position:relative;padding-top:30px}
.axis .bar1{position:absolute;left:0;top:13px;height:1px;background:var(--rule-2);width:100%;
  transform-origin:left;transform:scaleX(0);transition:transform 1.3s var(--e2)}
.axis.in .bar1{transform:scaleX(1)}
.stns{display:grid;gap:clamp(26px,3vw,42px)}
@media (min-width:900px){.stns{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.2vw,36px)}
  .stns > :nth-child(2){padding-top:24px}
  .stns > :nth-child(3){padding-top:48px}
  .stns > :nth-child(4){padding-top:72px}}
.stn{position:relative;padding-top:22px}
.stn::before{content:"";position:absolute;left:0;top:-12px;width:1px;height:22px;background:var(--rule-2)}
.stn::after{content:"";position:absolute;left:-3px;top:-15px;width:7px;height:7px;background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--rule-2);transition:background-color .45s var(--e)}
.stn.in::after{background:var(--cyan)}
@media (min-width:900px){
  .stns > :nth-child(2) .stn::before{height:46px;top:-36px}
  .stns > :nth-child(3) .stn::before{height:70px;top:-60px}
  .stns > :nth-child(4) .stn::before{height:94px;top:-84px}
  .stns > :nth-child(2) .stn::after{top:-39px}
  .stns > :nth-child(3) .stn::after{top:-63px}
  .stns > :nth-child(4) .stn::after{top:-87px}}
.stn .lbl{display:block;margin-bottom:10px}
.stn h3{margin-bottom:9px}
.stn p{font-size:.97rem;line-height:1.52;color:var(--muted)}

/* ==========================================================
   Contact
   ========================================================== */
.dark{background:var(--ink);color:var(--paper);border-top:0}
.dark .read{color:rgba(233,235,232,.66)}
.dark .lbl{color:rgba(233,235,232,.55)}
.dark .lbl b{color:var(--cyan)}
.contact-grid{display:grid;gap:clamp(26px,3.6vw,56px)}
@media (min-width:940px){.contact-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}}
.contact-grid figure{aspect-ratio:4/3;overflow:hidden;background:var(--ink-2)}
.contact-grid figure img{width:100%;height:100%;object-fit:cover}
.contact-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,2.6vw,32px)}
.block{margin-top:clamp(34px,4.4vw,64px);border:1px solid var(--rule-inv);display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:820px){.block{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.95fr) minmax(0,.8fr)}}
.block div{padding:16px 20px 18px;border-right:1px solid var(--rule-inv);border-bottom:1px solid var(--rule-inv)}
.block div:nth-child(2n){border-right:0}
@media (min-width:820px){.block div{border-bottom:0}
  .block div:nth-child(2n){border-right:1px solid var(--rule-inv)}
  .block div:last-child{border-right:0}}
.block .lbl{display:block;margin-bottom:7px}
.block p,.block a{font-weight:600;font-size:clamp(.94rem,1.05vw,1.02rem);line-height:1.32}
.block a:hover{color:var(--cyan)}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--paper);padding-block:clamp(34px,4.2vw,56px) 26px}
.foot-in{display:grid;gap:clamp(26px,3.4vw,44px)}
@media (min-width:800px){.foot-in{grid-template-columns:1.7fr .9fr .9fr}}
.foot img.mk{height:34px;width:auto;margin-bottom:14px}
.foot p.co{color:rgba(233,235,232,.62);max-width:32ch;font-size:.98rem}
.foot h4{color:var(--cyan);margin-bottom:13px}
.foot li + li{margin-top:8px}
.foot li a{color:rgba(233,235,232,.7);font-size:.98rem;transition:color .3s var(--e)}
.foot li a:hover{color:var(--paper)}
.foot .end{margin-top:clamp(30px,3.6vw,48px);padding-top:18px;border-top:1px solid var(--rule-inv);
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between}

/* ---- About page ---- */
.tone{background:var(--paper-2)}
.about-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,46px);margin:clamp(34px,4.4vw,64px) 0 0;padding-top:clamp(18px,2vw,26px);border-top:1px solid var(--rule-2)}
.about-facts .fct{display:block}
.about-facts dt{margin:0 0 7px}
.about-facts dd{margin:0;font-weight:600;font-size:clamp(1rem,.4vw + .9rem,1.22rem);line-height:1.25}
@media (max-width:680px){.about-facts{grid-template-columns:repeat(2,1fr);gap:clamp(22px,4vw,30px) clamp(20px,3vw,40px)}}

.founder{margin:0;max-width:58ch}
.founder blockquote{font-weight:500;font-size:clamp(1.5rem,3.1vw,2.35rem);line-height:1.22;letter-spacing:-.018em;margin:.35em 0 clamp(24px,2.6vw,36px)}
.founder-who{display:flex;align-items:center;gap:16px}
.founder-who img{width:92px;height:auto;filter:brightness(0);opacity:.82}
.founder-who b{display:block;font-weight:700;font-size:1rem}
.founder-who .rl{display:block;color:var(--muted);font-size:13px;margin-top:2px}

.principles{list-style:none;margin:0;padding:0;display:grid;gap:clamp(22px,3vw,40px) clamp(30px,4vw,64px)}
@media (min-width:760px){.principles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.principles li{border-top:1px solid var(--rule-2);padding-top:clamp(15px,1.6vw,20px)}
.principles .pn{display:block;font-weight:800;font-size:clamp(1.15rem,1.4vw,1.5rem);color:var(--cyan-d,#00919F);letter-spacing:-.02em;margin-bottom:clamp(9px,1vw,13px)}
.principles h3{margin-bottom:8px}
.principles p{font-size:1rem;line-height:1.5;color:rgba(15,24,29,.76)}

/* ---- Contact page ---- */
.contact-cols{display:grid;gap:clamp(30px,4vw,64px)}
@media (min-width:900px){.contact-cols{grid-template-columns:minmax(0,1.35fr) minmax(0,.82fr)}}
.contact-panel{display:grid;gap:clamp(22px,2.6vw,32px);align-content:start}
.contact-panel .ci .lbl{display:block;margin-bottom:8px}
.contact-panel .ci p{font-size:clamp(1rem,.4vw + .9rem,1.12rem);line-height:1.42;margin:0}
.contact-panel .ci a:hover{color:var(--cyan-d,#00919F)}
.contact-panel .ci .tlink{margin-top:11px}
.ci-social a{display:inline-block;margin-right:15px}
.map{border:1px solid var(--rule);overflow:hidden;background:var(--paper-2)}
.map iframe{width:100%;height:clamp(320px,42vw,520px);border:0;display:block;filter:grayscale(1) contrast(1.06) brightness(1.03)}

/* Fluent Forms — minimal, on brand */
.fluentform .ff-el-group{margin-bottom:clamp(16px,1.8vw,22px)}
.fluentform .ff-el-input--label label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:8px;display:inline-block}
.fluentform .ff-el-form-control{width:100%;font-family:var(--f);font-size:1rem;line-height:1.4;color:var(--ink);background:transparent;border:1px solid var(--rule-2);border-radius:0;padding:13px 15px;transition:border-color .25s}
.fluentform .ff-el-form-control::placeholder{color:rgba(15,24,29,.4)}
.fluentform .ff-el-form-control:focus{outline:none;border-color:var(--ink)}
.fluentform textarea.ff-el-form-control{min-height:150px;resize:vertical}
.fluentform .ff-btn-submit{font-family:var(--f) !important;font-weight:600 !important;background:var(--ink) !important;color:var(--paper) !important;border:0 !important;border-radius:0 !important;min-height:52px;padding:0 28px !important;font-size:.98rem;cursor:pointer;box-shadow:none !important;transition:background .3s var(--e,ease),color .3s var(--e,ease)}
.fluentform .ff-btn-submit:hover{background:var(--cyan) !important;color:var(--ink) !important}
.fluentform .ff-el-is-error .ff-el-form-control{border-color:#c0392b}
.fluentform .text-danger,.fluentform .error{color:#c0392b;font-size:.85rem;margin-top:5px}

/* ---- Services page ---- */
.services-list{margin-top:clamp(8px,1.6vw,20px)}
.svc-row{display:grid;gap:clamp(20px,3vw,54px);padding:clamp(30px,4.5vw,60px) 0;border-top:1px solid var(--rule-2)}
.svc-row:last-child{border-bottom:1px solid var(--rule-2)}
@media (min-width:860px){.svc-row{grid-template-columns:minmax(0,.46fr) minmax(0,1fr);align-items:start}}
.svc-vis{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px)}
.svc-num{font-weight:800;font-size:clamp(1.3rem,1.8vw,1.9rem);color:var(--cyan-d,#00919F);letter-spacing:-.02em;line-height:1}
.svc-vis .form{max-width:280px}
.svc-body .d3{margin:0}
.svc-sub{font-size:clamp(1.12rem,1.5vw,1.4rem);font-weight:500;color:var(--ink);letter-spacing:-.01em;margin:.35em 0 .7em;line-height:1.25}
.svc-body .read{max-width:54ch;color:var(--muted)}
.svc-body .spec{display:flex;flex-wrap:wrap;gap:7px;margin:clamp(16px,2vw,22px) 0 0;padding:0}
.svc-body .spec li{list-style:none;font-weight:500;font-size:12.5px;padding:5px 10px;box-shadow:inset 0 0 0 1px var(--rule)}

/* ---- Case studies page ---- */
.cases{display:grid;gap:clamp(26px,3.2vw,46px)}
@media (min-width:760px){.cases{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cases .plate{aspect-ratio:16/10}
.cases .job[data-dark] .plate{background:var(--ink-2)}
.case-type{color:var(--muted);font-size:13.5px;margin-top:5px}

/* ---- Service detail page ---- */
.caps{display:grid;gap:clamp(22px,3vw,40px)}
@media (min-width:720px){.caps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cap{border-top:1px solid var(--rule-2);padding-top:clamp(14px,1.6vw,20px)}
.cap h3{margin-bottom:8px}
.cap p{color:var(--muted);font-size:1rem;line-height:1.5}
.other-svcs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:clamp(16px,2.4vw,40px)}

/* ---- Service detail: value trio + FAQ ---- */
.vtrio{display:grid;gap:clamp(22px,3vw,40px)}
@media (min-width:720px){.vtrio{grid-template-columns:repeat(3,minmax(0,1fr))}}
.vtrio .vb{border-top:2px solid var(--cyan);padding-top:clamp(14px,1.6vw,20px)}
.vtrio .vb h3{margin-bottom:8px}
.vtrio .vb p{color:var(--muted);font-size:1rem;line-height:1.5}

.faq{max-width:860px;border-top:1px solid var(--rule-2)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:clamp(15px,1.9vw,22px) 0;font-weight:600;font-size:clamp(1.02rem,.5vw + .9rem,1.18rem);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--cyan-d,#00919F);font-weight:700;font-size:1.35em;line-height:.9}
.faq details[open] summary::after{content:"\2013"}
.faq details p{margin:0 0 clamp(15px,1.9vw,22px);color:var(--muted);line-height:1.55;max-width:68ch}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;
    scroll-behavior:auto !important}
  .rv,.build .art,.build .fade,.drawer a{opacity:1 !important;transform:none !important}
  .build .draw{stroke-dashoffset:0 !important}
  .axis .bar1{transform:scaleX(1) !important}
  .note::before{width:100%}
}

/* ---- Services: link to detail page ---- */
.svc-body .svc-more{margin-top:clamp(16px,2vw,22px)}

/* ---- Case study (detail) ---- */
.cs-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,30px) clamp(24px,3vw,40px);margin-top:clamp(26px,3vw,40px)}
.cs-shot{margin:0;border-radius:14px;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px var(--rule-2),0 34px 66px -44px rgba(15,24,29,.55)}
.cs-shot .cs-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--paper-2);box-shadow:inset 0 -1px 0 0 var(--rule)}
.cs-shot .cs-bar i{width:9px;height:9px;border-radius:50%;background:var(--rule-2);flex:none}
.cs-shot .cs-bar b{margin-left:10px;font-weight:500;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-shot img{display:block;width:100%;height:auto}
.cs-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,3vw,44px);border-top:1px solid var(--rule-2);padding-top:clamp(22px,3vw,40px)}
.cs-stat{display:flex;flex-direction:column;gap:6px}
.cs-n{font-weight:800;letter-spacing:-.02em;font-size:clamp(2rem,3.4vw,3.1rem);line-height:1;color:var(--ink)}
.cs-l{color:var(--muted);font-size:14px;line-height:1.35}
@media (max-width:680px){.cs-stats{grid-template-columns:repeat(2,1fr);gap:clamp(22px,5vw,34px)}}
.cs-quote{margin:0;max-width:24ch}
.cs-quote blockquote{margin:0;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.cs-quote figcaption{margin-top:clamp(16px,2vw,22px)}
@media (min-width:860px){.cs-quote{max-width:32ch}}

/* ---- Service illustrations (product-image tiles, replaced the line icons) ---- */
.form img{width:100%;height:100%;object-fit:contain;padding:clamp(12px,2.2vw,30px);display:block;transition:transform .55s var(--e2)}
.svc:hover .form{background:var(--paper-2)}
.svc:hover .form img{transform:scale(1.06)}

/* ---- Clickable "What we do" cards + team member links + white-logo tiles ---- */
a.svc{color:inherit;text-decoration:none;display:block}
.mate-in{color:inherit;text-decoration:none;display:block}
.mate figure[data-dark]{background:#16232A}
.mate figure[data-dark] img{object-fit:contain;padding:22%;filter:none}

/* ---- Case-studies grid + Home work: website screenshot fills the tile (mockup) ---- */
.plate.shot img{max-width:none;max-height:none;width:100%;height:100%;object-fit:cover;object-position:top}
.work .job .plate.shot{aspect-ratio:16/10}

/* ---- Footer credit line: not uppercase, cyan link ---- */
.foot .end{text-transform:none;letter-spacing:normal;font-size:12.5px}

/* Case-study screenshots fill the tile edge-to-edge (no white frame) */
.plate.shot{padding:0}

/* ---- Back-to-top: squared ink tile with a cyan scroll-progress cap (echoes
   the header reading-progress bar); arrow lifts on hover. Wired in site.js. ---- */
#totop{position:fixed;right:clamp(16px,2.4vw,30px);bottom:clamp(16px,2.4vw,30px);z-index:120;
  width:52px;height:52px;display:grid;place-items:center;overflow:hidden;
  background:var(--ink);color:var(--paper);border:0;cursor:pointer;
  box-shadow:0 10px 26px rgba(15,24,29,.30),0 0 0 1px rgba(233,235,232,.22);
  opacity:0;transform:translateY(14px) scale(.92);pointer-events:none;
  transition:opacity .5s var(--e),transform .5s var(--e),background .3s var(--e)}
#totop.on{opacity:1;transform:none;pointer-events:auto}
#totop::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--cyan);
  transform:scaleX(var(--sp,0));transform-origin:left;transition:transform .12s linear}
#totop svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;
  transition:transform .4s var(--e)}
#totop:hover{background:#0a1013}
#totop:hover svg{transform:translateY(-3px)}
#totop:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
@media (prefers-reduced-motion:reduce){#totop,#totop svg,#totop::before{transition:none}}

/* ==========================================================
   Divider-line breathing room (site-wide)
   Sections that zero their top padding (style="padding-top:0")
   draw the .sec rule directly above their content. Give that
   flush content the same comfortable gap the case-studies grid
   (.cs2-grid, on /case-studies-b/) already uses, so the divider
   line never hugs the content. Elements that already own their
   top spacing (the grid, services list, case-study stats) keep
   theirs; posts/articles use no such sections, so are untouched.
   ========================================================== */
.sec[style*="padding-top:0"] > .wrap > :first-child:not(.cs2-grid):not(.services-list):not(.cs-stats){
  margin-top:clamp(26px,3vw,42px);
}