/* ==========================================================================
   Ihsan Design
   Type:  CHANEY (display) · Wotfard (body) · Geomanist (labels)

   THEMING
   Light is the default. Dark applies when the visitor's OS asks for it, and
   the header toggle overrides either way (persisted in localStorage).

   Token roles stay constant across themes — only their values swap:
     --ink / --ink-2 / --ink-raised   surfaces, back to front
     --paper / -2 / -3                text, primary to tertiary
     --accent                         emphasis text (ink — never the brand yellow)
     --accent-display                 gold emphasis at HEADLINE SCALE only
     --accent-fill / --accent-on-fill the brand yellow as a FILL, and text on it
     --about-tint / --about-line      the green wash on the About strip

   COLOUR RULE
   The brand yellow is fill-only: buttons, the wordmark dot, hairline rules and
   the checked checkbox. At 1.7:1 on white it cannot carry text, so ordinary
   emphasis comes from ink, weight and scale instead.

   The one exception is --accent-display, used by the Mission statement. WCAG
   asks only 3:1 of text at 24px and above, which buys a deep gold (#b58900,
   3.21:1) in light mode; in dark mode it is simply the brand yellow. Do not
   reach for it below 24px — it fails 4.5:1.
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face{font-family:Chaney;src:url(../fonts/CHANEY-Regular.otf) format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Wotfard;src:url(../fonts/wotfard-light-webfont.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Wotfard;src:url(../fonts/wotfard-regular-webfont.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Wotfard;src:url(../fonts/wotfard-medium-webfont.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Geomanist;src:url(../fonts/geomanist-regular-webfont.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* ---------- LIGHT (default) ---------- */
:root{
  --ink:            #ffffff;
  --ink-2:          #f5f5f2;
  --ink-raised:     #ffffff;
  --line:           rgb(18 18 15 / .13);
  --line-strong:    rgb(18 18 15 / .24);

  --paper:          #14140f;
  --paper-2:        rgb(20 20 15 / .74);
  --paper-3:        rgb(20 20 15 / .60);

  /* Amber is FILL-ONLY. It is 1.7:1 on white, so it can never carry text;
     as a button fill the dark label on top carries the contrast instead.
     Text that wants emphasis uses ink (--accent), never the brand yellow. */
  --accent:         #14140f;
  /* The one exception to fill-only: the Mission statement sets its emphasis in
     gold. At 24px+ WCAG asks 3:1 rather than 4.5:1, and #b58900 is the deepest
     gold that clears it (3.21:1). #ffc107 itself is 1.7:1 and fails even that. */
  --accent-display: #b58900;
  --accent-fill:    #ffc107;
  --accent-fill-hi: #ffd24a;
  --accent-on-fill: #14140f;
  --accent-soft:    rgb(255 193 7 / .30);
  --meaning-wash:   rgb(255 193 7 / .16);
  --about-tint:     rgb(120 203 146 / .10);
  --about-line:     rgb(120 203 146 / .40);
  --glow-1:         rgb(255 193 7 / .10);
  --glow-2:         rgb(120 140 255 / .05);

  --danger:         #b3261e;

  --nav-bg:         rgb(255 255 255 / .86);
  --nav-menu-bg:    rgb(255 255 255 / .97);
  --hover-wash:     rgb(18 18 15 / .035);
  --hover-wash-2:   rgb(18 18 15 / .06);
  --field-bg:       rgb(18 18 15 / .022);
  --field-bg-focus: rgb(18 18 15 / .045);

  --grain-opacity:  .02;
  /* client marks are supplied white-on-transparent — flatten them to black */
  --logo-filter:    brightness(0);
  --logo-rest:      .62;
  /* the portrait is a cut-out — transparent so it takes the page colour exactly */
  --portrait-bg:    transparent;
  --select-arrow:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230f1a14' stroke-width='1.4'/%3E%3C/svg%3E");

  --display: Chaney, "Arial Narrow", Impact, sans-serif;
  --body:    Wotfard, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --label:   Geomanist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --shell: 1160px;
  --gut: clamp(1.25rem, 5vw, 3.5rem);
  --sec: clamp(5rem, 12vw, 9.5rem);

  --ease: cubic-bezier(.22,.61,.36,1);

  color-scheme: light;
}

/* ---------- DARK ---------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --ink:            #0c0c0d;
    --ink-2:          #121214;
    --ink-raised:     #17171a;
    --line:           rgb(255 255 255 / .09);
    --line-strong:    rgb(255 255 255 / .18);

    --paper:          #f2f2ef;
    --paper-2:        rgb(242 242 239 / .68);
    --paper-3:        rgb(242 242 239 / .46);

    --accent:         #f2f2ef;
    --accent-display: #ffc107;
    --accent-fill:    #ffc107;
    --accent-fill-hi: #ffd24a;
    --accent-on-fill: #0c0c0d;
    --accent-soft:    rgb(255 193 7 / .14);
    --meaning-wash:   rgb(255 193 7 / .055);
    --about-tint:     rgb(120 203 146 / .10);
    --about-line:     rgb(120 203 146 / .40);
    --glow-1:         rgb(255 193 7 / .10);
    --glow-2:         rgb(120 140 255 / .07);

    --danger:         #ff8f7a;

    --nav-bg:         rgb(12 12 13 / .82);
    --nav-menu-bg:    rgb(12 12 13 / .97);
    --hover-wash:     rgb(255 255 255 / .025);
    --hover-wash-2:   rgb(255 255 255 / .06);
    --field-bg:       rgb(255 255 255 / .03);
    --field-bg-focus: rgb(255 255 255 / .05);

    --grain-opacity:  .035;
    --logo-filter:    brightness(0) invert(1);
    --logo-rest:      .55;
    --portrait-bg:    transparent;
    --select-arrow:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23eef5f0' stroke-width='1.4'/%3E%3C/svg%3E");

    color-scheme: dark;
  }
}

:root[data-theme=dark]{
  --ink:            #0c0c0d;
  --ink-2:          #121214;
  --ink-raised:     #17171a;
  --line:           rgb(255 255 255 / .09);
  --line-strong:    rgb(255 255 255 / .18);

  --paper:          #f2f2ef;
  --paper-2:        rgb(242 242 239 / .68);
  --paper-3:        rgb(242 242 239 / .46);

  --accent:         #f2f2ef;
  --accent-display: #ffc107;
  --accent-fill:    #ffc107;
  --accent-fill-hi: #ffd24a;
  --accent-on-fill: #0c0c0d;
  --accent-soft:    rgb(255 193 7 / .14);
  --meaning-wash:   rgb(255 193 7 / .055);
  --about-tint:     rgb(120 203 146 / .10);
  --about-line:     rgb(120 203 146 / .40);
  --glow-1:         rgb(255 193 7 / .10);
  --glow-2:         rgb(120 140 255 / .07);

  --danger:         #ff8f7a;

  --nav-bg:         rgb(12 12 13 / .82);
  --nav-menu-bg:    rgb(12 12 13 / .97);
  --hover-wash:     rgb(255 255 255 / .025);
  --hover-wash-2:   rgb(255 255 255 / .06);
  --field-bg:       rgb(255 255 255 / .03);
  --field-bg-focus: rgb(255 255 255 / .05);

  --grain-opacity:  .035;
  --logo-filter:    brightness(0) invert(1);
  --logo-rest:      .55;
  --portrait-bg:    transparent;
  --select-arrow:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23eef5f0' stroke-width='1.4'/%3E%3C/svg%3E");

  color-scheme: dark;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,ul,ol{margin:0}
ul[role=list],ol[role=list]{list-style:none;padding:0}
img{max-width:100%;display:block;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}

html{scroll-behavior:smooth;scroll-padding-top:6rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-weight:300;
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background-color .4s var(--ease),color .4s var(--ease);
}

/* subtle film grain */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:var(--grain-opacity);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection{background:var(--accent-fill);color:var(--accent-on-fill)}

:focus-visible{outline:2px solid var(--paper);outline-offset:3px;border-radius:2px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:10000;
  background:var(--accent-fill);color:var(--accent-on-fill);
  padding:.75rem 1.25rem;font-family:var(--label);
  font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
}
.skip-link:focus{left:1rem;top:1rem}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.dim{color:var(--paper-3)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--d,0) * 90ms)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--label);font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--paper-3);margin-bottom:clamp(1.5rem,4vw,2.5rem);
}

.section-label{
  display:flex;align-items:baseline;gap:.85rem;
  font-family:var(--label);font-weight:400;font-size:.75rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--paper-3);
  padding-bottom:1.5rem;margin-bottom:clamp(2rem,5vw,3rem);
  border-bottom:1px solid var(--line);
}
.section-label__num{color:var(--accent);font-variant-numeric:tabular-nums}

.section-intro{
  max-width:52ch;font-size:clamp(1.0625rem,1rem + .45vw,1.3125rem);line-height:1.6;
  color:var(--paper-2);margin-bottom:clamp(2.5rem,6vw,4rem);
}
.section-intro--tight{margin-bottom:clamp(2rem,4vw,3rem)}

/* ---------- buttons ---------- */
:root{--btn-fill:var(--accent-fill);--btn-fill-hi:var(--accent-fill-hi)}
.btn{
  --bg:var(--btn-fill);--fg:var(--accent-on-fill);
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  background:var(--bg);color:var(--fg);
  font-family:var(--label);font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;
  padding:1.05rem 1.9rem;border:1px solid transparent;border-radius:999px;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .25s var(--ease),background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.btn:hover{transform:translateY(-2px);background:var(--btn-fill-hi)}
.btn:active{transform:translateY(0)}
.btn--ghost{--bg:transparent;--fg:var(--paper);border-color:var(--line-strong)}
.btn--ghost:hover{background:var(--hover-wash-2);border-color:var(--paper-3)}
.btn--sm{padding:.7rem 1.25rem;font-size:.75rem}
.btn--block{width:100%;padding-block:1.15rem}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed;inset:0 0 auto;z-index:100;
  transition:background-color .35s var(--ease),border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:var(--nav-bg);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav__inner{display:flex;align-items:center;gap:1rem;min-height:76px}

.nav__brand{display:flex;align-items:center;text-decoration:none;margin-right:auto}

/* wordmark — the period carries the brand yellow */
.wordmark{
  font-family:var(--display);text-transform:uppercase;line-height:1;
  letter-spacing:.02em;white-space:nowrap;
}
.wordmark__dot{color:var(--accent-fill)}
.nav__brand .wordmark{font-size:1.0625rem}

.nav__links{display:flex;align-items:center;gap:clamp(1rem,2.5vw,2.25rem)}
.nav__links a:not(.btn){
  font-family:var(--label);font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--paper-2);text-decoration:none;padding:.4rem 0;position:relative;
  transition:color .25s var(--ease);
}
.nav__links a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--accent-fill);transform:scaleX(0);transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav__links a:not(.btn):hover{color:var(--paper)}
.nav__links a:not(.btn):hover::after{transform:scaleX(1);transform-origin:left}

.nav__utils{display:flex;align-items:center;gap:.25rem;margin-left:clamp(.75rem,2vw,1.75rem)}

.theme-toggle{
  display:grid;place-items:center;width:40px;height:40px;
  background:none;border:1px solid var(--line);border-radius:999px;cursor:pointer;
  color:var(--paper-2);
  transition:color .25s var(--ease),border-color .25s var(--ease),background-color .25s var(--ease);
}
.theme-toggle:hover{color:var(--paper);border-color:var(--line-strong);background:var(--hover-wash)}
.theme-toggle svg{width:18px;height:18px;grid-area:1/1;transition:opacity .3s var(--ease),transform .4s var(--ease)}
/* light theme shows the moon (the thing you can switch TO) */
.theme-toggle .i-sun{opacity:0;transform:rotate(-60deg) scale(.6)}
.theme-toggle .i-moon{opacity:1;transform:none}
:root[data-theme=dark] .theme-toggle .i-sun{opacity:1;transform:none}
:root[data-theme=dark] .theme-toggle .i-moon{opacity:0;transform:rotate(60deg) scale(.6)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .theme-toggle .i-sun{opacity:1;transform:none}
  :root:not([data-theme=light]) .theme-toggle .i-moon{opacity:0;transform:rotate(60deg) scale(.6)}
}
@media (prefers-reduced-motion:reduce){.theme-toggle svg{transition:none}}

.nav__toggle{
  display:none;background:none;border:0;cursor:pointer;padding:.75rem;margin-right:-.75rem;
}
.nav__toggle span{
  display:block;width:26px;height:1.5px;background:var(--paper);
  transition:transform .3s var(--ease),opacity .2s var(--ease);
}
.nav__toggle span+span{margin-top:7px}
.nav__toggle[aria-expanded=true] span:first-child{transform:translateY(4.25px) rotate(45deg)}
.nav__toggle[aria-expanded=true] span:last-child{transform:translateY(-4.25px) rotate(-45deg)}

@media (max-width:800px){
  .nav__toggle{display:block}
  .nav__links{
    position:fixed;inset:76px 0 auto;flex-direction:column;align-items:flex-start;gap:0;
    background:var(--nav-menu-bg);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);
    padding:1rem var(--gut) 2.25rem;
    clip-path:inset(0 0 100% 0);opacity:0;pointer-events:none;
    transition:clip-path .4s var(--ease),opacity .3s var(--ease);
  }
  .nav__links.is-open{clip-path:inset(0 0 0 0);opacity:1;pointer-events:auto}
  .nav__links a:not(.btn){
    width:100%;padding:1.05rem 0;font-size:1rem;border-bottom:1px solid var(--line);
  }
  .nav__links .btn{margin-top:1.5rem;width:100%}
  .nav:has(.is-open){background:var(--nav-menu-bg)}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;display:flex;align-items:center;min-height:100svh;padding-block:7rem 3rem;overflow:hidden}
.hero__glow{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60ch 46ch at 18% 28%, var(--glow-1), transparent 70%),
    radial-gradient(70ch 50ch at 88% 88%, var(--glow-2), transparent 70%);
}
.hero__inner{position:relative}

.hero__title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.75rem,8.4vw,7.25rem);
  line-height:.9;letter-spacing:-.005em;text-transform:uppercase;
  margin-bottom:clamp(1.5rem,3vw,2.25rem);
}
.hero__title span{display:block}
.hero__accent{color:var(--paper)}

.hero__lede{
  max-width:44ch;font-size:clamp(1.125rem,1rem + .8vw,1.5rem);line-height:1.55;
  color:var(--paper-2);margin-bottom:clamp(2.25rem,5vw,3.25rem);
}

.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem}

.hero__scroll{
  display:block;width:1px;height:64px;margin-top:clamp(3rem,8vw,5.5rem);
  background:var(--line-strong);position:relative;overflow:hidden;
}
.hero__scroll span{
  position:absolute;inset:0;background:var(--accent-fill);
  animation:trickle 2.4s var(--ease) infinite;
}
@keyframes trickle{
  0%{transform:translateY(-100%)}
  60%,100%{transform:translateY(100%)}
}
@media (prefers-reduced-motion:reduce){.hero__scroll span{animation:none;opacity:.5}}
@media (max-width:600px){.hero__scroll{display:none}}

/* screen-reader-only utility */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ==========================================================================
   CLIENTS
   ========================================================================== */
.clients{padding-block:var(--sec);background:var(--ink-2);border-block:1px solid var(--line)}
.clients__lede{max-width:52ch;color:var(--paper-2);margin-bottom:clamp(2.75rem,6vw,4rem)}
.clients__note{max-width:52ch;color:var(--paper-2);margin-top:clamp(2.25rem,5vw,3.25rem)}

/* minmax(0,1fr) not 1fr — the images' intrinsic width would otherwise set the
   track minimum and blow the grid past its container. */
.logos{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.logos__item{
  display:grid;place-items:center;
  aspect-ratio:16/9;padding:clamp(1rem,3vw,1.75rem);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
}
.logos__item img{
  width:auto;max-height:100%;max-width:88%;object-fit:contain;
  /* sources are white-on-transparent; flatten to one flat tone per theme */
  filter:var(--logo-filter);
  opacity:var(--logo-rest);transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.logos__item:hover img{opacity:1;transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){.logos__item:hover img{transform:none}}

@media (max-width:1000px){.logos{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:620px){.logos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:380px){.logos{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ==========================================================================
   MANIFESTO
   ========================================================================== */
.manifesto{padding-block:calc(var(--sec) * 1.05)}
.manifesto__text{
  font-family:var(--body);font-weight:300;
  font-size:clamp(1.5rem,1rem + 2.6vw,3rem);line-height:1.28;
  letter-spacing:-.015em;max-width:22ch;
}
.manifesto__text span{display:block}
.manifesto__text span+span{margin-top:.55em}
.manifesto__text span:nth-child(2){--d:1}
.manifesto__text span:nth-child(3){--d:2}
.manifesto__text{color:var(--paper-2)}
.manifesto__text em{font-style:normal;font-weight:400;color:var(--accent-display)}

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services{padding-block:var(--sec);background:var(--ink-2);border-block:1px solid var(--line)}

.accordion{border-top:1px solid var(--line)}
.svc{border-bottom:1px solid var(--line)}
.svc h3{margin:0;font-size:inherit;font-weight:inherit}

.svc__head{
  --svc-pad-y:clamp(1.6rem,3.5vw,2.35rem);
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:clamp(1rem,3vw,2rem);
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  padding:var(--svc-pad-y) 0;
  transition:padding .35s var(--ease),background-color .35s var(--ease);
}
/* extra air under the title while the row is closed — when it opens, the panel
   content supplies its own spacing and this is given back */
.svc__head[aria-expanded=false]{padding-bottom:calc(var(--svc-pad-y) + 24px)}
.svc__head:hover{background:var(--hover-wash);padding-inline:clamp(.5rem,2vw,1.25rem)}

.svc__name{
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(1.375rem,1rem + 2vw,2.5rem);line-height:1.05;letter-spacing:.005em;
  color:var(--paper-2);transition:color .3s var(--ease);
}
.svc__head:hover .svc__name,
.svc__head[aria-expanded=true] .svc__name{color:var(--accent)}


/* chevron disclosure — points down when closed, flips up when open */
.disclosure{
  width:34px;height:34px;flex:none;position:relative;border-radius:999px;
  border:1px solid var(--line);
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.disclosure::before{
  content:"";position:absolute;top:44%;left:50%;width:9px;height:9px;
  border-right:1.5px solid var(--paper-2);border-bottom:1.5px solid var(--paper-2);
  transform:translate(-50%,-50%) rotate(45deg);transform-origin:center;
  transition:transform .35s var(--ease),border-color .3s var(--ease);
}
[aria-expanded=true] .disclosure{border-color:var(--accent-fill);background:var(--accent-soft)}
/* a chevron's optical centre sits below its bounding box when it points up,
   so the open state is nudged down rather than mirrored exactly */
[aria-expanded=true] .disclosure::before{
  border-color:var(--paper);
  transform:translate(-50%,-8%) rotate(-135deg);
}
button:hover .disclosure{border-color:var(--line-strong)}
@media (prefers-reduced-motion:reduce){.disclosure::before{transition:none}}

/* About strip: the disclosure takes the strip's green */
.strip .disclosure{border-color:rgb(120 203 146 / .6);background:rgb(120 203 146 / .15)}
.strip .disclosure::before{border-color:#78CB92}
.strip__head:hover .disclosure,
.strip__head[aria-expanded=true] .disclosure{border-color:#78CB92;background:rgb(120 203 146 / .3)}
.strip__head[aria-expanded=true] .disclosure::before{border-color:#78CB92}

.svc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
/* the UA [hidden] rule is display:none, which display:grid above would beat */
.svc__panel[hidden]{display:none}
.svc__panel.is-open{grid-template-rows:1fr}
.svc__panel>*{overflow:hidden}
.svc__panel-in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3.5rem);
  padding-bottom:clamp(2rem,4vw,3rem);
}
@media (max-width:820px){.svc__panel-in{grid-template-columns:1fr;gap:1.5rem}}
@media (prefers-reduced-motion:reduce){.svc__panel{transition:none}}

.svc__blurb{color:var(--paper-2);max-width:46ch}
.svc__blurb em{font-style:italic;color:var(--paper)}

.svc__list{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.svc__list li{
  position:relative;padding-left:1.6rem;font-size:.9375rem;color:var(--paper-2);line-height:1.55;
}
.svc__list li::before{
  content:"•";position:absolute;left:0;top:-.15em;font-size:1.2em;color:var(--accent-fill);
}
.svc__note{
  grid-column:1/-1;font-size:.8125rem;color:var(--paper-3);
  padding-top:.5rem;border-top:1px solid var(--line);margin-top:.5rem;
}


/* ==========================================================================
   ABOUT
   ========================================================================== */
.about{padding-block:var(--sec)}

/* ---------- the collapsed strip ---------- */
/* a navy laid over the page at very low alpha — cooler and more considered
   than the neutral grey used elsewhere, without becoming a colour block */
.strip{border:1px solid var(--about-line);border-radius:2px;background:var(--about-tint)}
.strip__panel-in{border-top-color:var(--about-line)}
.strip__h{margin:0;font-size:inherit;font-weight:inherit}
.strip__head{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center;gap:clamp(1rem,2.5vw,1.75rem);
  width:100%;min-height:160px;
  background:none;border:0;cursor:pointer;text-align:left;
  padding:16px clamp(1rem,3vw,1.75rem);
  transition:background-color .3s var(--ease);
}
.strip__head:hover{background:var(--hover-wash)}

/* Roundel showing the whole figure. The source is 800x968, so `contain` fits
   all of it inside the circle rather than cropping to the face. */
.strip__avatar{
  display:grid;place-items:center;overflow:hidden;
  width:112px;height:112px;border-radius:999px;padding-top:10%;
  background:var(--hover-wash);flex:none;
  box-shadow:inset 0 0 0 1px var(--line);
}
.strip__avatar picture{display:block;width:100%;height:100%}
/* the figure sits at 43.6% across the source frame, not 50%, so it reads left
   of centre in a circle — nudged right to compensate */
.strip__avatar img{
  width:100%;height:100%;object-fit:contain;object-position:50% 100%;
  transform:translateX(8%);
  filter:grayscale(1) contrast(1.06);transition:filter .5s var(--ease);
}
.strip__head:hover .strip__avatar img{filter:grayscale(0) contrast(1)}
@media (max-width:560px){
  .strip__head{min-height:0;padding-block:1rem}
  .strip__avatar{width:72px;height:72px}
}

.strip__id{display:grid;gap:.15rem;min-width:0}
.strip__name{
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(.9375rem,.85rem + .4vw,1.125rem);letter-spacing:.02em;line-height:1.2;
  color:var(--paper-2);transition:color .3s var(--ease);
}
.strip__head:hover .strip__name,
.strip__head[aria-expanded=true] .strip__name{color:var(--accent)}
.strip__role{
  font-family:var(--label);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--paper-3);line-height:1.5;
}
.strip__meta{
  font-family:var(--label);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--paper-3);white-space:nowrap;
}
.strip__cue{
  font-family:var(--label);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);white-space:nowrap;
}
.strip__head[aria-expanded=true] .strip__cue{visibility:hidden}

.strip__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.strip__panel[hidden]{display:none}
.strip__panel.is-open{grid-template-rows:1fr}
.strip__panel>*{overflow:hidden}
.strip__panel-in{
  padding:clamp(1.75rem,4vw,2.5rem) clamp(1rem,3vw,1.75rem) clamp(1.75rem,4vw,2.5rem);
  border-top:1px solid var(--line);
}
/* inside the panel the blurb spans the full width, not the text column.
   Its wash would stack over the green tint, so on this surface it
   sits on the plain page colour and keeps only the green edge. */
.strip__panel-in .meaning{
  margin-top:clamp(2rem,4vw,3rem);
  background:var(--ink);
  border-color:var(--line);
  border-left-color:#78CB92;
}
.about__after{grid-column:1/-1;margin-top:clamp(2rem,4vw,3rem)}
.about__after p{color:var(--paper-2);max-width:70ch}
.about__after .about__sub{margin-top:0}
.about__after-lead{margin-bottom:1.25rem}

/* qualifications — award on top, institution beneath, newest first */
.creds{display:grid;gap:0;border-top:1px solid var(--line);max-width:70ch}
.creds__item{
  display:grid;gap:.2rem;
  padding:.9rem 0;border-bottom:1px solid var(--line);
}
.creds__award{font-size:.9375rem;line-height:1.45;color:var(--paper)}
.creds__place{
  font-family:var(--label);font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--paper-3);line-height:1.5;
}
@media (min-width:620px){
  .creds__item{
    grid-template-columns:minmax(0,1fr) auto;align-items:baseline;
    column-gap:2rem;
  }
  .creds__place{text-align:right}
}
@media (prefers-reduced-motion:reduce){.strip__panel{transition:none}}

/* the strip head sheds its optional columns on narrow screens */
@media (max-width:860px){
  .strip__head{grid-template-columns:auto minmax(0,1fr) auto}
  .strip__cue{display:none}
}
@media (max-width:560px){
  .strip__meta{display:none}
}

.about__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);
  gap:clamp(2rem,6vw,5rem);align-items:start;
}
/* stacked, the portrait leads — it introduces the person before the bio */
@media (max-width:880px){
  .about__grid{grid-template-columns:1fr}
  .about__portrait{order:-1}
}

/* the portrait is a transparent cut-out, so it takes the page colour exactly
   rather than sitting on a plate — see --portrait-bg */
.about__portrait{
  display:flex;flex-direction:column;align-items:stretch;
}
.about__portrait picture{display:block;width:100%}
.about__portrait img{
  width:100%;border-radius:2px;filter:grayscale(1) contrast(1.06);
  transition:filter .6s var(--ease);
  background:var(--portrait-bg);
}
.about__portrait:hover img{filter:grayscale(0) contrast(1)}
/* full-width block so "centred" means centred on the photo, not on its text */
.about__caption{
  width:100%;text-align:center;
  font-family:var(--label);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper-3);margin-top:1rem;
}
@media (max-width:880px){
  .about__portrait img{max-width:none}
}

.about__body>p+p{margin-top:1.1rem}
.about__lead{
  font-size:clamp(1.25rem,1rem + 1.1vw,1.75rem);line-height:1.4;letter-spacing:-.01em;
  margin-top:35px;margin-bottom:1.35rem;
}
.about__body p:not(.about__lead){color:var(--paper-2);max-width:60ch}

.about__sub{
  font-family:var(--label);font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:400;color:var(--paper-3);margin-top:2.5rem;margin-bottom:.85rem;
}

.facts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;
  margin-top:2.25rem;padding-top:2rem;border-top:1px solid var(--line);
}
.fact{display:flex;flex-direction:column;gap:.35rem}
.fact__k{font-family:var(--display);text-transform:uppercase;font-size:clamp(1rem,.85rem + .75vw,1.375rem);line-height:1.1;color:var(--accent);overflow-wrap:anywhere}
.fact__v{font-family:var(--label);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-3);line-height:1.5}
@media (max-width:560px){.facts{grid-template-columns:1fr;gap:1.35rem}}

/* the name — what "ihsan" means */
.meaning{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:center;gap:clamp(1.5rem,4vw,3.5rem);
  margin-top:clamp(3rem,7vw,5rem);
  padding:clamp(1.5rem,4vw,2.5rem);
  border:1px solid var(--line);border-left:2px solid #78CB92;border-radius:2px;
  background:linear-gradient(90deg, var(--meaning-wash), transparent 60%);
}
.meaning__script{
  /* Wotfard has no Arabic glyphs — fall through to a system Arabic face */
  font-family:"Geeza Pro","Noto Naskh Arabic","Al Bayan","Segoe UI",serif;
  font-size:clamp(2.75rem,2rem + 3vw,4.5rem);line-height:1.35;
  color:var(--paper-2);white-space:nowrap;
}
.meaning__term{
  font-family:var(--display);text-transform:uppercase;font-weight:400;
  font-size:clamp(1.0625rem,1rem + .5vw,1.375rem);letter-spacing:.02em;
  margin-bottom:.65rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem;
}
.meaning__ipa{
  font-family:var(--body);text-transform:none;font-weight:300;
  font-size:.9375rem;letter-spacing:0;color:var(--paper-3);
}
.meaning__def{color:var(--paper-2);max-width:56ch;font-size:.9375rem;line-height:1.65}
@media (max-width:620px){
  .meaning{grid-template-columns:1fr;gap:1rem}
  .meaning__script{line-height:1.1}
}

/* ==========================================================================
   HOW WE WORK
   ========================================================================== */
.approach{padding-block:var(--sec)}

.process{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.process__step{background:var(--ink);padding:clamp(1.5rem,3vw,2.25rem)}
.process__num{
  font-family:var(--label);font-size:.6875rem;letter-spacing:.18em;color:var(--accent);
  display:block;margin-bottom:1.25rem;
}
.process__step h3{
  font-family:var(--display);text-transform:uppercase;font-weight:400;
  font-size:1.0625rem;letter-spacing:.02em;margin-bottom:.6rem;
}
.process__step p{font-size:.9rem;color:var(--paper-3);line-height:1.6}
@media (max-width:900px){.process{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.process{grid-template-columns:1fr}}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact{
  padding-block:var(--sec);background:var(--ink-2);border-top:1px solid var(--line);
  position:relative;overflow:hidden;
}
.contact::before{
  content:"";position:absolute;inset:auto -10% -40% auto;width:70ch;height:70ch;pointer-events:none;
  background:radial-gradient(circle, var(--glow-1), transparent 65%);
}
.contact__grid{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(2.5rem,6vw,5rem);align-items:start;
}
@media (max-width:900px){.contact__grid{grid-template-columns:1fr}}

.contact__title{
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(2.25rem,1.5rem + 4vw,4.5rem);line-height:.95;
  margin-bottom:1.5rem;
}
.contact__lede{color:var(--paper-2);max-width:38ch;margin-bottom:clamp(2.5rem,5vw,3.5rem)}

/* "who you're contacting" — ties the form to the About strip below it */
.who{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:center;gap:.5rem 1rem;
  padding:1rem 1.15rem;margin-bottom:clamp(2rem,4vw,2.75rem);
  border:1px solid var(--line);border-left:2px solid var(--accent-fill);border-radius:2px;
  background:linear-gradient(90deg, var(--meaning-wash), transparent 70%);
}
/* same treatment as .strip__avatar */
.who__avatar{
  display:grid;place-items:center;overflow:hidden;
  width:56px;height:56px;border-radius:999px;padding-top:10%;
  background:var(--hover-wash);flex:none;
  box-shadow:inset 0 0 0 1px var(--line);
}
.who__avatar picture{display:block;width:100%;height:100%}
.who__avatar img{
  width:100%;height:100%;object-fit:contain;object-position:50% 100%;
  transform:translateX(8%);
  filter:grayscale(1) contrast(1.06);
}
.who__text{display:grid;gap:.15rem;min-width:0}
.who__lead{font-size:.9375rem;line-height:1.4;color:var(--paper)}
.who__sub{
  font-family:var(--label);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--paper-3);line-height:1.5;
}
.who__link{
  grid-column:2;justify-self:start;
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--label);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper);text-decoration:none;
  padding-bottom:4px;border-bottom:1.5px solid var(--accent-fill);
  margin-top:.35rem;
  transition:gap .25s var(--ease),opacity .25s var(--ease);
}
.who__link:hover{gap:.65rem;opacity:.8}
@media (max-width:420px){
  .who{grid-template-columns:1fr}
  .who__link{grid-column:1}
}

.contact__direct{display:grid;gap:0;border-top:1px solid var(--line)}
.contact__direct li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.5rem;
  padding:1.1rem 0;border-bottom:1px solid var(--line);
}
.contact__k{
  font-family:var(--label);font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--paper-3);min-width:6rem;
}
.contact__direct a{
  color:var(--paper);text-decoration:none;
  background-image:linear-gradient(var(--accent-fill),var(--accent-fill));
  background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .35s var(--ease),color .25s var(--ease);
  padding-bottom:2px;
}
.contact__direct a:hover{background-size:100% 1px;color:var(--accent)}

/* ---------- form ---------- */
.contact__form-wrap{
  background:var(--ink-raised);border:1px solid var(--line);border-radius:3px;
  padding:clamp(1.5rem,4vw,2.75rem);
}
.form{display:grid;gap:1.4rem}

.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.field{display:grid;gap:.5rem}
.field label{
  font-family:var(--label);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--paper-2);
}
.req{color:var(--accent)}
.opt{color:var(--paper-3);letter-spacing:.1em;text-transform:none;font-size:.6875rem}

.field input[type=text],
.field input[type=email],
.field select,
.field textarea{
  width:100%;background-color:var(--field-bg);
  border:1px solid var(--line-strong);border-radius:2px;
  padding:.9rem 1rem;font-family:var(--body);font-weight:300;font-size:1rem;color:var(--paper);
  transition:border-color .25s var(--ease),background-color .25s var(--ease);
}
.field textarea{resize:vertical;min-height:8rem;line-height:1.6}
.field select{
  appearance:none;cursor:pointer;padding-right:2.75rem;
  background-image:var(--select-arrow);
  background-repeat:no-repeat;background-position:right 1rem center;
}
/* Deliberately NOT styling <option>. Setting a background on it drops Chrome
   out of native popup rendering into a custom-painted list that is oversized and
   badly constrained. The popup follows `color-scheme` (set per theme on :root),
   so it already matches light/dark on its own. */
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--paper-3)}
.field input:focus,.field select:focus,.field textarea:focus{
  /* background-color, not the shorthand — `background` would reset the
     select's arrow background-image to none on focus */
  outline:none;border-color:var(--accent-fill);background-color:var(--field-bg-focus);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.field input::placeholder,.field textarea::placeholder{color:var(--paper-3)}

.field--check{grid-template-columns:auto 1fr;align-items:start;gap:.75rem}
.field--check input{
  appearance:none;width:20px;height:20px;flex:none;margin-top:.15rem;
  border:1px solid var(--line-strong);border-radius:2px;cursor:pointer;
  background:var(--field-bg);transition:background-color .2s var(--ease),border-color .2s var(--ease);
}
.field--check input:checked{
  background:var(--accent-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' fill='none'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' stroke='%230c0c0d' stroke-width='2'/%3E%3C/svg%3E") center/12px no-repeat;
  border-color:var(--accent-fill);
}
.field--check label{
  text-transform:none;letter-spacing:.01em;font-family:var(--body);font-size:.875rem;
  color:var(--paper-2);line-height:1.5;cursor:pointer;
}
.field--check .err{grid-column:1/-1}

.err{font-size:.8125rem;color:var(--danger);font-family:var(--body)}

.field.has-error input,
.field.has-error select,
.field.has-error textarea{border-color:var(--danger)}

.form__status{font-size:.9375rem;line-height:1.5;min-height:1px}
.form__status:empty{display:none}
.form__status.is-ok{color:var(--accent)}
.form__status.is-bad{color:var(--danger)}

.form__fallback{font-size:.8125rem;color:var(--paper-3);text-align:center}
.form__fallback a{color:var(--paper-2)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{padding-block:clamp(3rem,7vw,4.5rem);border-top:1px solid var(--line)}
.footer__inner{display:grid;gap:1.75rem}
.footer__brand{
  display:inline-flex;align-items:center;text-decoration:none;justify-self:start;
}
.footer__brand .wordmark{font-size:1rem}

.footer__links{display:flex;flex-wrap:wrap;gap:.5rem 2rem}
.footer__links a{
  font-family:var(--label);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper-3);text-decoration:none;transition:color .25s var(--ease);
}
.footer__links a:hover{color:var(--accent)}

/* linked text sits a touch heavier than body copy.
   Wotfard has a real 400; Geomanist ships one weight only, so a hairline
   stroke thickens it without the browser faking a bold */
.contact__direct a,.form__fallback a{font-weight:400}
.nav__links a:not(.btn),.footer__links a,.who__link{
  -webkit-text-stroke:.3px currentColor;
}

.footer__legal{font-size:.75rem;color:var(--paper-3);max-width:60ch;line-height:1.6}

@media (min-width:760px){
  .footer__inner{grid-template-columns:auto 1fr;align-items:center;column-gap:3rem}
  .footer__links{justify-content:flex-end}
  .footer__legal{grid-column:1/-1;padding-top:1.5rem;border-top:1px solid var(--line)}
}