/*
Theme Name: MeekPixel
Theme URI: https://meekpixels.com/
Author: MeekPixel
Author URI: https://meekpixels.com/
Description: A lightweight, hand-coded theme for MeekPixel. Two grounds, near-black and the studio's own pale cream, oversized Bricolage Grotesque headlines, and the MeekPixel green held back for numbers and calls to action. No page builder, no bloat.
Version: 1.16.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: meek
Tags: business, portfolio, one-column, custom-colors, custom-menu, dark-mode, accessibility-ready, footer-widgets
*/

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root{
  /* Light. The studio's own pale cream, carried over from the previous site,
     with the MeekPixel green as the only accent. Every pair below clears
     WCAG AA on this ground. */
  --bg:            #F6F8D5;
  --bg-2:          #EEF1C6;
  --surface:       #FCFDEE;
  --surface-2:     #FFFFFF;
  --ink:           #12252B;
  --ink-2:         #3D4F55;
  --ink-3:         #556468;
  --line:          #DCE2BC;
  --line-2:        #C6CE9F;
  --accent:        #2C6E77;
  --accent-hover:  #1F565E;
  --accent-ink:    #FFFFFF;
  --accent-soft:   rgba(44,110,119,.08);
  --accent-line:   rgba(44,110,119,.28);
  --ok:            #12805A;
  --ok-soft:       rgba(18,128,90,.10);
  --err:           #B02525;
  --err-soft:      rgba(176,37,37,.08);
  --shadow-sm:     0 1px 2px rgba(18,37,43,.05), 0 4px 14px -8px rgba(18,37,43,.18);
  --shadow-lg:     0 24px 60px -34px rgba(18,37,43,.40);

  --band-bg:       #17454A;
  --band-fg:       #FFFFFF;
  --band-fg-soft:  rgba(255,255,255,.82);
  --band-line:     rgba(255,255,255,.22);

  --foot-bg:       #0E1A1D;
  --foot-fg:       #F4F5F7;
  --foot-fg-soft:  rgba(244,245,247,.76);
  --foot-fg-faint: rgba(244,245,247,.72);

  --glass-bg:      rgba(252,253,238,.44);
  --glass-brd:     rgba(255,255,255,.55);
  --glass-hi:      rgba(255,255,255,.85);
  --glass-lo:      rgba(18,37,43,.05);
  --glass-rim-a:   rgba(255,255,255,.98);
  --glass-rim-b:   rgba(255,255,255,.50);
  --glass-sheen:   rgba(255,255,255,.55);
  --glass-sheen-2: rgba(255,255,255,.22);
  --glass-shadow:  0 10px 34px -12px rgba(18,37,43,.26);

  /* The soft washes from the old site's background, minus the indigo. These
     drive the two drifting blobs behind every page. */
  --wash-1:        rgba(126,196,104,.30);
  --wash-2:        rgba(199,178,138,.28);
  --wash-3:        rgba(78,153,162,.20);
  --foot-line:     rgba(244,245,247,.14);

  /* The footer carries the only heavy gradient on the site. */
  --foot-glow-1:   rgba(78,153,162,.86);
  --foot-glow-2:   rgba(23,69,74,.88);
  --foot-glow-3:   rgba(126,196,104,.34);


  --glow: rgba(44,110,119,.14);

  color-scheme: light;

  /* Type */
  --display: "Bricolage Grotesque", "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body:    "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Rhythm */
  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1240px;
  --readable: 68ch;
  --radius: 5px;
  --radius-lg: 14px;
  --btn-radius: 999px;
  --sect-y: clamp(64px, 9vw, 132px);

  color-scheme: light;
}

[data-theme="dark"]{
  /* The intended look, and where every visitor lands. */
  --bg:            #0B0C0F;
  --bg-2:          #08090B;
  --surface:       #111319;
  --surface-2:     #171A21;
  --ink:           #F4F5F7;
  --ink-2:         #A7ADBC;
  --ink-3:         #7E8494;
  --line:          #1E212A;
  --line-2:        #2A2E39;
  --accent:        #4E99A2;
  --accent-hover:  #7CC4CC;
  --accent-ink:    #06181B;
  --accent-soft:   rgba(78,153,162,.12);
  --accent-line:   rgba(78,153,162,.34);
  --ok:            #3ECF8E;
  --ok-soft:       rgba(62,207,142,.10);
  --err:           #FF7A70;
  --err-soft:      rgba(255,122,112,.10);
  --shadow-sm:     0 1px 2px rgba(0,0,0,.4), 0 4px 14px -8px rgba(0,0,0,.6);
  --shadow-lg:     0 24px 60px -34px rgba(0,0,0,.9);

  --band-bg:       #17454A;
  --band-fg:       #FFFFFF;
  --band-fg-soft:  rgba(255,255,255,.80);
  --band-line:     rgba(255,255,255,.20);

  --foot-bg:       #08090B;
  --foot-fg:       #F4F5F7;
  --foot-fg-soft:  rgba(244,245,247,.76);
  --foot-fg-faint: rgba(244,245,247,.72);

  /* On a near-black page a dark pane is invisible: blur has nothing to bite
     on. So the dark glass is lifted well above the ground, the way Apple's
     is, and given a brighter rim. It reads as a lit pane floating over the
     page rather than a hole cut in it. */
  --glass-bg:      rgba(78,92,99,.30);
  --glass-brd:     rgba(255,255,255,.16);
  --glass-hi:      rgba(255,255,255,.24);
  --glass-lo:      rgba(0,0,0,.34);
  --glass-rim-a:   rgba(255,255,255,.66);
  --glass-rim-b:   rgba(255,255,255,.20);
  --glass-sheen:   rgba(255,255,255,.17);
  --glass-sheen-2: rgba(126,200,205,.13);
  --glass-shadow:  0 10px 34px -12px rgba(0,0,0,.85);

  --wash-1:        rgba(78,153,162,.20);
  --wash-2:        rgba(60,140,112,.13);
  --wash-3:        rgba(78,153,162,.10);

  --foot-glow-1:   rgba(78,153,162,.82);
  --foot-glow-2:   rgba(23,69,74,.84);
  --foot-glow-3:   rgba(126,196,104,.30);
  --foot-line:     #1E212A;

  --glow: rgba(78,153,162,.26);

  color-scheme: dark;

  color-scheme: dark;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;}

/* The `hidden` attribute must win over any display rule we set on a class,
   or conditionally-shown fields leak onto the page. */
[hidden]{display:none !important;}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  background-color:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-wrap:break-word;
  transition:background-color .3s ease, color .3s ease;
}

/* --------------------------------------------------------------------------
   Ambient gradient.

   Two soft blobs fixed behind every page, so the colour is sitewide rather
   than a homepage-only flourish. They are painted once and then moved with
   `transform` alone, which the compositor handles on the GPU: no repaint, no
   layout, and nothing for the main thread to do while the visitor reads.
   -------------------------------------------------------------------------- */

.ambient{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;          /* the blobs run past the edges on purpose */
  pointer-events:none;
}

.ambient span{
  position:absolute;
  display:block;
  will-change:transform;
}

.ambient span:first-child{
  top:-30vh; left:-25vw; width:85vw; height:95vh;
  background:radial-gradient(closest-side, var(--wash-1), transparent 72%);
  animation:meek-drift-a 38s ease-in-out infinite;
}

.ambient span:last-child{
  bottom:-32vh; right:-22vw; width:80vw; height:90vh;
  background:radial-gradient(closest-side, var(--wash-2), transparent 74%);
  animation:meek-drift-b 52s ease-in-out infinite;
}

@keyframes meek-drift-a{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%    { transform:translate3d(7vw,5vh,0) scale(1.14); }
}
@keyframes meek-drift-b{
  0%,100%{ transform:translate3d(0,0,0) scale(1.06); }
  50%    { transform:translate3d(-6vw,-4vh,0) scale(.94); }
}

/* A stronger, local wash at the top of every page, where the headline is.
   This is the only place besides the footer the colour is allowed to be
   obvious. Clipped by the section, so again no stray scrollbar. */
.hero,.page-hero{position:relative;}
.hero::before,
.page-hero::before{
  content:"";
  position:absolute;
  inset:-40% 0 -10% 0;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(58% 62% at 22% 34%, var(--wash-3), transparent 68%);
}

@media (prefers-reduced-motion: reduce){
  .ambient span{animation:none;}
}

img,video{max-width:100%;height:auto;display:block;}
svg{max-width:100%;display:block;}
/* Any inline icon with no rule of its own still sits on the text size
   rather than ballooning to the SVG default of 300x150. */
svg[viewBox="0 0 24 24"]{width:1em;height:1em;flex:none;}
a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:1px;}
a:hover{color:var(--accent-hover);}
button,input,select,textarea{font:inherit;color:inherit;}
button{cursor:pointer;}
hr{border:0;border-top:1px solid var(--line);margin:var(--sect-y) 0;}

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

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

/* Headings */
h1,h2,h3,h4{
  font-family:var(--display);
  font-variation-settings:"SOFT" 0,"WONK" 1;
  font-weight:400;
  letter-spacing:-.025em;
  line-height:1.06;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:clamp(38px,6.2vw,88px);font-weight:300;line-height:1;}
h2{font-size:clamp(28px,4.2vw,56px);}
h3{font-size:clamp(21px,2.4vw,32px);}
h4{font-size:clamp(18px,1.8vw,23px);}
h5,h6{font-family:var(--body);font-weight:600;letter-spacing:-.01em;margin:0 0 .5em;}

p{margin:0 0 1.1em;}
p:last-child{margin-bottom:0;}
strong,b{font-weight:600;}
em{font-style:italic;}
blockquote{
  margin:0;font-family:var(--display);font-variation-settings:"SOFT" 0,"WONK" 1;
  font-weight:300;font-size:clamp(21px,3vw,40px);line-height:1.2;letter-spacing:-.02em;
}
code,kbd,pre{font-family:var(--mono);font-size:.88em;}
pre{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;overflow-x:auto;}

/* ==========================================================================
   3. UTILITIES
   ========================================================================== */

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
.wrap--narrow{max-width:880px;}
.wrap--reading{max-width:760px;}

.eyebrow{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:0 0 20px;
  display:block;
}
.lede{font-size:clamp(17px,1.7vw,21px);line-height:1.6;color:var(--ink-2);max-width:var(--readable);}
.muted{color:var(--ink-2);}
.rule{height:1px;background:var(--line);border:0;margin:0;}
.tabular{font-variant-numeric:tabular-nums;}
.serif{font-family:var(--display);font-variation-settings:"SOFT" 0,"WONK" 1;}
.accent{color:var(--accent);}

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

/* Skip link */
.skip-link{
  position:absolute;left:12px;top:-70px;z-index:2000;
  background:var(--accent);color:var(--accent-ink);
  padding:12px 20px;border-radius:var(--radius);
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;transition:top .18s ease;
}
.skip-link:focus{top:12px;color:var(--accent-ink);}

/* Sections */
.section{padding-block:var(--sect-y);}
.section--tight{padding-block:clamp(44px,6vw,80px);}
.section--alt{background:color-mix(in srgb, var(--bg-2) 88%, transparent);}
.section--surface{background:color-mix(in srgb, var(--surface) 90%, transparent);}
.section--ink{background:var(--band-bg);color:var(--band-fg);}
.section--ink h1,.section--ink h2,.section--ink h3{color:var(--band-fg);}
.section--ink p{color:var(--band-fg-soft);}
.section--ink .eyebrow{color:var(--band-fg-soft);}

.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,52px);
  border-bottom:1px solid var(--line);padding-bottom:20px;
}
.section-head h2{margin:0;}
.section-head .eyebrow{margin:0 0 10px;}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--body);font-size:15px;font-weight:600;letter-spacing:.005em;
  padding:15px 28px;border-radius:var(--btn-radius);border:1px solid var(--accent);
  color:var(--accent);background:transparent;text-decoration:none;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
  line-height:1.2;text-align:center;
}
.btn:hover{background:var(--accent-soft);color:var(--accent);transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn--solid{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
.btn--solid:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-ink);}
.btn--ink{border-color:var(--ink);color:var(--ink);}
.btn--ink:hover{background:var(--ink);color:var(--bg);}
.btn--onink{border-color:var(--band-fg);color:var(--band-fg);}
.btn--onink:hover{background:rgba(255,255,255,.10);color:var(--band-fg);}
.btn--onink.btn--solid{background:var(--band-fg);color:var(--band-bg);border-color:var(--band-fg);}
.btn--onink.btn--solid:hover{background:#fff;color:var(--band-bg);border-color:#fff;}
.btn--sm{padding:10px 18px;font-size:13.5px;}
.btn--block{width:100%;}
.btn[disabled],.btn.is-busy{opacity:.6;pointer-events:none;}
.btn svg{width:1.05em;height:1.05em;flex:none;}

.btn-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}

.link-arrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;display:inline-flex;align-items:center;gap:8px;color:var(--accent);
  border-bottom:1px solid var(--accent-line);
  padding:4px 0 5px;
  transition:gap .18s ease,border-color .18s ease;
}
.link-arrow:hover{gap:13px;border-color:var(--accent);}


/* ==========================================================================
   5. HEADER / NAV
   ========================================================================== */

/* ==========================================================================
   LINKS AND RATINGS ON PEOPLE, REVIEWS AND PROJECTS

   Both print nothing at all when the field behind them is empty, so an
   unfilled profile leaves no gap, no stray rule and no lonely icon.
   ========================================================================== */

.soc-row{
  list-style:none;
  margin:12px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.soc-row a{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid var(--line);
  color:var(--ink-3);
  text-decoration:none;
  transition:color .18s ease, border-color .18s ease, transform .18s ease;
}
.soc-row a:hover,
.soc-row a:focus-visible{
  color:var(--accent);
  border-color:var(--accent-line);
  transform:translateY(-1px);
}
.soc-row svg{width:15px;height:15px;}

.soc-row--case{margin-top:22px;}

/* In the footer the row sits inside a list of links, so it needs no top gap
   and a colour that belongs to the dark footer rather than the page. */
.soc-row--foot{margin:10px 0 0;}
.soc-row--foot a{
  border-color:var(--foot-line);
  color:var(--foot-fg-soft);
}
.soc-row--foot a:hover,
.soc-row--foot a:focus-visible{
  color:var(--foot-fg);
  border-color:var(--foot-fg-soft);
}

/* Stars. Outline for the empty ones, filled for the earned ones, and a
   half is drawn by clipping a filled copy over the outline. */
.stars{
  display:inline-flex;
  gap:2px;
  color:var(--accent);
  font-size:16px;
  line-height:1;
  margin-bottom:14px;
}
.stars .star{position:relative;display:block;width:1em;height:1em;color:var(--line-2);}
.stars .star.is-full{color:var(--accent);}
.stars .star.is-full svg{fill:currentColor;}
.stars .star.is-half::after{
  content:"";
  position:absolute;
  inset:0;
  width:50%;
  overflow:hidden;
  color:var(--accent);
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 3.6 2.6 5.3 5.9.9-4.3 4.2 1 5.8-5.2-2.7-5.2 2.7 1-5.8L3.5 9.8l5.9-.9z'/%3E%3C/svg%3E") left center / 200% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 3.6 2.6 5.3 5.9.9-4.3 4.2 1 5.8-5.2-2.7-5.2 2.7 1-5.8L3.5 9.8l5.9-.9z'/%3E%3C/svg%3E") left center / 200% 100% no-repeat;
}
.stars--card{font-size:13px;margin:10px 0 0;}

/* The client's own words on a case study. */
.case-quote{
  margin:0;
  padding:clamp(22px,3vw,34px) 0 0;
  border-top:1px solid var(--line);
}
.case-quote blockquote{
  margin:0 0 16px;
  font-size:clamp(21px,2.8vw,30px);
  line-height:1.3;
  letter-spacing:-.015em;
  max-width:26ch;
}
.case-quote figcaption{margin:0;}

/* ==========================================================================
   GLASS

   Three tiers, because there is no single technique that is both convincing
   and universally supported.

   1. Everywhere: a blurred, saturated backdrop with a bright rim along the
      top-left and a dimmer one along the bottom-right. That pair of rims is
      what makes a flat panel read as a curved edge catching light.
   2. Chrome and Edge: a real refraction pass on the backdrop, using an SVG
      displacement map, so what is behind the panel genuinely bends at the
      rim rather than just blurring. Safari and Firefox cannot do SVG filters
      on a backdrop at all, so they keep tier 1 and look fine.
   3. Anyone who has asked for reduced transparency, or is on a low-end
      device: a solid panel. Legibility beats decoration.
   ========================================================================== */

.glass{
  position:relative;
  background:var(--glass-bg);
  backdrop-filter:blur(26px) saturate(210%) brightness(1.06) contrast(1.02);
  -webkit-backdrop-filter:blur(26px) saturate(210%) brightness(1.06) contrast(1.02);
  border:1px solid var(--glass-brd);
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 var(--glass-hi),
    inset 0 -1px 0 var(--glass-lo);
}

/* The rim. A one-pixel ring lit from the top left and picked out again, more
   faintly, at the bottom right, which is how a real bevel behaves. */
.glass::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  pointer-events:none;
  background:
    linear-gradient(140deg, var(--glass-rim-a) 0%, transparent 30%),
    linear-gradient(320deg, var(--glass-rim-b) 0%, transparent 26%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
}

/* Tier 2. The url() goes last so the displacement acts on the blurred,
   saturated backdrop rather than the raw one. */
@supports (backdrop-filter: url(#meek-lens-bar)){
  html.meek-refract .glass--bar{
    backdrop-filter:blur(13px) saturate(195%) brightness(1.06) url(#meek-lens-bar);
  }
}

/* Tier 3. */
@media (prefers-reduced-transparency: reduce){
  .glass{
    background:var(--surface);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}
html.meek-noglass .glass{
  background:var(--surface);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* The floating things that are made of glass. Composed here so the recipe
   above stays in one place. */
.site-header,
.dock__inner,
.dock__handle,
.float-btn--top,
.cookie,
.modal__panel{
  position:relative;
  background:var(--glass-bg);
  backdrop-filter:blur(26px) saturate(210%) brightness(1.06) contrast(1.02);
  -webkit-backdrop-filter:blur(26px) saturate(210%) brightness(1.06) contrast(1.02);
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 var(--glass-hi),
    inset 0 -8px 18px -12px var(--glass-lo),
    inset 0 -1px 0 var(--glass-lo);
}
.site-header::after,
.dock__inner::after,
.dock__handle::after,
.float-btn--top::after,
.cookie::after,
.modal__panel::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  border-radius:inherit;
  padding:1px;
  pointer-events:none;
  background:
    linear-gradient(140deg, var(--glass-rim-a) 0%, transparent 30%),
    linear-gradient(320deg, var(--glass-rim-b) 0%, transparent 26%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
}

/* Refraction goes on the floating pills only. The header runs the full width
   of the screen, so its "rim" would land at the very edges of the viewport and
   read as two vertical seams rather than a curved edge. It keeps tier 1. */
/* The surface sheen.

   Refraction is Chrome only, so every other browser needs something else to
   make a panel read as a piece of glass rather than a tinted rectangle. This
   is the specular: a broad diagonal highlight across the face, brightest at
   the top left, plus a soft bloom at the bottom right where light would
   bounce back up through the thickness. It drifts, very slowly, which is the
   part that sells it. Transform only, so it costs nothing. */
.site-header::before,
.dock__inner::before,
.dock__handle::before,
.float-btn--top::before,
.cookie::before,
.modal__panel::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  overflow:hidden;
  background:
    linear-gradient(128deg,
      var(--glass-sheen) 0%,
      transparent 34%,
      transparent 62%,
      var(--glass-sheen-2) 100%);
  opacity:.9;
}

/* The moving part is a separate, larger layer inside the same box so the
   highlight can travel without the panel's edges moving with it. */
.dock__inner::before,
.cookie::before,
.modal__panel::before{
  background:
    linear-gradient(128deg, var(--glass-sheen) 0%, transparent 38%),
    radial-gradient(60% 120% at 88% 108%, var(--glass-sheen-2), transparent 62%);
  animation:meek-sheen 18s ease-in-out infinite;
}

@keyframes meek-sheen{
  0%,100%{ opacity:.75; transform:translate3d(0,0,0); }
  50%    { opacity:1;   transform:translate3d(2%,-2%,0); }
}
@media (prefers-reduced-motion: reduce){
  .dock__inner::before,.cookie::before,.modal__panel::before{animation:none;}
}

/* Chrome and Edge get the real thing on top of all of that. */
@supports (backdrop-filter: url(#meek-lens-bar)){
  html.meek-refract .dock__inner,
  html.meek-refract .cookie,
  html.meek-refract .modal__panel{
    backdrop-filter:blur(13px) saturate(200%) brightness(1.06) url(#meek-lens-bar);
  }
}

@media (prefers-reduced-transparency: reduce){
  .site-header,.dock__inner,.dock__handle,.float-btn--top,.cookie,.modal__panel{
    background:var(--surface);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}
html.meek-noglass .site-header,
html.meek-noglass .dock__inner,
html.meek-noglass .dock__handle,
html.meek-noglass .float-btn--top,
html.meek-noglass .cookie,
html.meek-noglass .modal__panel{
  background:var(--surface);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.meek-lens-defs{position:absolute;width:0;height:0;overflow:hidden;}

/* Both glass layers are decorative and sit behind everything in the panel. */
.site-header > *,
.dock__inner > *,
.cookie > *,
.modal__panel > *{position:relative;z-index:2;}

.site-header{
  position:sticky;top:0;z-index:900;
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
@supports not (backdrop-filter: blur(1px)){ .site-header{background:var(--bg);} }
.site-header.is-stuck{border-bottom-color:var(--line);box-shadow:var(--shadow-sm);}

.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:76px;
}
@media (max-width:900px){ .header-inner{min-height:66px;} }

.brand{
  font-family:var(--display);font-variation-settings:"SOFT" 0,"WONK" 1;
  font-weight:600;font-size:25px;letter-spacing:-.025em;
  text-decoration:none;color:var(--ink);line-height:1;white-space:nowrap;
}
.brand:hover{color:var(--ink);}
.brand img{max-height:40px;width:auto;}

/* WordPress prints its own markup for a Site Identity logo, outside .brand,
   so it needs its own sizing or it renders at the file's natural width. */
.custom-logo-link{display:inline-flex;align-items:center;line-height:0;}
.custom-logo-link img,
img.custom-logo{max-height:38px;width:auto;height:auto;display:block;}
@media (max-width:1000px){ .custom-logo-link img, img.custom-logo{max-height:32px;} }
@media (max-width:420px){ .custom-logo-link img, img.custom-logo{max-height:27px;} }

/* The inlined lockup. The wordmark inherits `color`, so it is correct in both
   modes from one file; only the mark is fixed to the brand green. */
.brand--logo{display:inline-flex;align-items:center;color:var(--ink);}
.brand-logo{display:block;height:30px;width:auto;}
@media (max-width:1000px){ .brand-logo{height:26px;} }
@media (max-width:420px){ .brand-logo{height:23px;} }
.mobile-nav__top .brand-logo{height:24px;}
.brand-mark{display:block;height:1em;width:auto;}

.nav{display:flex;align-items:center;gap:6px;}
.nav ul{list-style:none;display:flex;align-items:center;gap:4px;margin:0;padding:0;}
.nav a{
  text-decoration:none;color:var(--ink);font-size:15px;font-weight:500;
  padding:9px 14px;border-radius:var(--radius);display:block;
  transition:background-color .16s ease,color .16s ease;
}
.nav a:hover{background:var(--accent-soft);color:var(--accent);}
.nav .current-menu-item > a,.nav .current_page_item > a{color:var(--accent);}

.header-actions{display:flex;align-items:center;gap:8px;}

.icon-btn{
  width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:transparent;color:var(--ink);
  border-radius:var(--radius);transition:border-color .16s ease,background-color .16s ease,color .16s ease;
  flex:none;
}
.icon-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);}
.icon-btn svg{width:18px;height:18px;}

.theme-toggle .icon-sun{display:none;}
[data-theme="dark"] .theme-toggle .icon-sun{display:block;}
[data-theme="dark"] .theme-toggle .icon-moon{display:none;}

.nav-toggle{display:none;}
@media (max-width:1000px){
  .nav--primary{display:none;}
  .nav-toggle{display:inline-flex;}
  .header-actions .btn{display:none;}
}

/* Mobile drawer */
.mobile-nav{
  position:fixed;inset:0;z-index:1000;
  background:var(--bg);
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;
  visibility:hidden;
}
.mobile-nav.is-open{transform:translateX(0);visibility:visible;}
.mobile-nav__top{
  display:flex;align-items:center;justify-content:space-between;
  min-height:66px;padding-inline:var(--gutter);border-bottom:1px solid var(--line);flex:none;
}
.mobile-nav__body{padding:34px var(--gutter) 40px;flex:1;}
.mobile-nav ul{list-style:none;margin:0 0 30px;padding:0;}
.mobile-nav li{border-bottom:1px solid var(--line);}
.mobile-nav li a{
  display:block;padding:17px 0;text-decoration:none;color:var(--ink);
  font-family:var(--display);font-variation-settings:"SOFT" 0,"WONK" 1;
  font-size:29px;font-weight:400;letter-spacing:-.02em;
}
.mobile-nav li a:hover{color:var(--accent);}
.mobile-nav__meta{margin-top:32px;padding-top:26px;border-top:1px solid var(--line);}
.mobile-nav__meta .eyebrow{margin-bottom:8px;}
.mobile-nav__meta a{display:block;text-decoration:none;color:var(--ink);font-size:16px;margin-bottom:8px;}
body.nav-open{overflow:hidden;}

/* ==========================================================================
   6. SCROLL PROGRESS
   ========================================================================== */

.scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:1200;
  background:transparent;pointer-events:none;
  opacity:0;transition:opacity .3s ease;
}
.scroll-progress.is-visible{opacity:1;}
.scroll-progress span{
  display:block;height:100%;width:0%;
  background:var(--accent);
  transform-origin:left center;
  transition:width .08s linear;
}

/* ==========================================================================
   7. HERO
   ========================================================================== */

.hero{padding-block:clamp(56px,9vw,124px) clamp(48px,7vw,96px);position:relative;}
.hero__eyebrow{margin-bottom:clamp(24px,3.5vw,42px);}
.hero h1{max-width:15ch;margin-bottom:0;}
.hero h1 em{font-style:italic;color:var(--accent);font-variation-settings:"SOFT" 0,"WONK" 1;}
.hero__rule{margin-block:clamp(30px,4.5vw,56px) clamp(24px,3vw,36px);}
.hero__foot{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);align-items:start;
}
@media (max-width:820px){ .hero__foot{grid-template-columns:1fr;gap:28px;} }
.hero__foot p{margin:0;}
.hero__promise{
  display:inline-flex;align-items:center;gap:9px;margin-top:18px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);
}
.hero__promise .dot{
  width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;
  box-shadow:0 0 0 3px var(--ok-soft);
}

/* Page hero (interior pages) */
.page-hero{padding-block:clamp(40px,6vw,84px) clamp(28px,4vw,52px);}
.page-hero h1{max-width:18ch;font-size:clamp(34px,5.4vw,72px);}
.page-hero .lede{margin-top:22px;}

/* ==========================================================================
   8. STATS
   ========================================================================== */

.stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
@media (max-width:760px){ .stats{grid-template-columns:repeat(2,minmax(0,1fr));} }
.stats__item{padding:clamp(22px,3vw,34px) clamp(16px,2vw,28px);border-right:1px solid var(--line);}
.stats__item:last-child{border-right:none;}
@media (max-width:760px){
  .stats__item:nth-child(2n){border-right:none;}
  .stats__item:nth-child(-n+2){border-bottom:1px solid var(--line);}
}
.stats__num{
  display:block;font-family:var(--display);font-variation-settings:"SOFT" 0,"WONK" 1;
  font-size:clamp(34px,4.6vw,60px);font-weight:300;line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
.stats__label{
  display:block;margin-top:12px;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);line-height:1.5;
}

/* ==========================================================================
   9. WORK / CASE STUDIES
   ========================================================================== */

.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,4vw,56px) clamp(24px,3vw,44px);}
@media (max-width:760px){ .work-grid{grid-template-columns:1fr;} }

.work-card{display:block;text-decoration:none;color:inherit;group:work;}
.work-card__media{
  aspect-ratio:5/4;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--surface);border:1px solid var(--line);
  margin-bottom:20px;position:relative;
}
.work-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.6,.2,1);}
.work-card:hover .work-card__media img{transform:scale(1.035);}
.work-card__ph{position:absolute;inset:0;display:grid;place-items:center;}
.work-card__ph span{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.85);
}
.ph-1{background:linear-gradient(150deg,#C9A88A,#8E6A4E);}
.ph-2{background:linear-gradient(150deg,#A8AE97,#5F6B55);}
.ph-3{background:linear-gradient(150deg,#C4A0A0,#7A4E4E);}
.ph-4{background:linear-gradient(150deg,#B9AFC2,#6B6079);}
.ph-5{background:linear-gradient(150deg,#C7B79A,#7C6A4C);}
.ph-6{background:linear-gradient(150deg,#9FB2BC,#5A6E79);}

.work-card__meta{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:9px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;
}
.work-card h3{
  font-size:clamp(22px,2.6vw,34px);margin:0 0 9px;
  transition:color .18s ease;
}
.work-card:hover h3{color:var(--accent);}
.work-card p{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.6;}
.work-card__result{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-line);
  padding:6px 12px;border-radius:999px;
}

/* Case study detail */
.cs-hero{padding-block:clamp(36px,5vw,70px) clamp(28px,3.5vw,44px);}
.cs-meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  margin-block:clamp(28px,4vw,48px);
}
.cs-meta div{background:var(--bg);padding:20px 22px;}
.cs-meta dt{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 7px;
}
.cs-meta dd{margin:0;font-size:16px;font-weight:500;}

/* ==========================================================================
   10. SERVICES
   ========================================================================== */

.service-list{border-top:1px solid var(--line);}
.service-row{
  display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,1.15fr) 40px;
  gap:clamp(16px,3vw,36px);align-items:start;
  padding-block:clamp(26px,3.4vw,42px);border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;transition:background-color .2s ease;
}
.service-row:hover{background:var(--accent-soft);}
@media (max-width:820px){
  .service-row{grid-template-columns:34px minmax(0,1fr);gap:10px 14px;}
  .service-row > div{grid-column:2;}
  .service-row__idx{padding-top:.35em;}
  .service-row__arrow{display:none;}
}
@media (max-width:420px){
  .service-row{grid-template-columns:1fr;gap:8px;}
  .service-row > div{grid-column:1;}
  .service-row__idx{padding-top:0;}
}
.service-row__idx{font-family:var(--mono);font-size:12px;color:var(--ink-3);letter-spacing:.1em;padding-top:.55em;}
.service-row h3{margin:0;font-size:clamp(23px,3vw,40px);}
.service-row p{margin:0 0 14px;color:var(--ink-2);font-size:16px;}
.service-row__tags{display:flex;flex-wrap:wrap;gap:7px;}
.service-row__tags span{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);border:1px solid var(--line-2);border-radius:999px;padding:5px 11px;
}
.service-row__arrow{font-size:22px;color:var(--ink-3);text-align:right;padding-top:.25em;transition:transform .2s ease,color .2s ease;}
.service-row:hover .service-row__arrow{color:var(--accent);transform:translateX(4px);}

/* ==========================================================================
   11. PROCESS
   ========================================================================== */

.process{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;}
@media (max-width:880px){ .process{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:520px){ .process{grid-template-columns:1fr;} }
.process__step{background:var(--bg);padding:clamp(24px,3vw,34px);}
.process__n{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--accent);
  display:block;margin-bottom:16px;
}
.process__step h3{font-size:clamp(20px,2.2vw,27px);margin:0 0 10px;}
.process__step p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.6;}

/* ==========================================================================
   12. TESTIMONIALS
   ========================================================================== */

.quote-block{max-width:24ch;}
.quote-lead{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:clamp(28px,5vw,64px);align-items:end;
}
@media (max-width:880px){ .quote-lead{grid-template-columns:1fr;gap:26px;align-items:start;} }
.quote-lead blockquote{max-width:22ch;margin-bottom:24px;}
.quote-cite{font-style:normal;display:block;}
.quote-cite strong{display:block;font-size:16px;font-weight:600;margin-bottom:3px;}
.quote-cite span{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);}

.review-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,28px);}
@media (max-width:900px){ .review-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:620px){ .review-grid{grid-template-columns:1fr;} }
.review{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;
}
.review__stars{color:var(--accent);letter-spacing:.14em;font-size:13px;margin-bottom:14px;}
.review p{
  font-family:var(--display);font-variation-settings:"SOFT" 0,"WONK" 1;font-weight:400;
  font-size:19px;line-height:1.4;letter-spacing:-.012em;margin:0 0 auto;padding-bottom:20px;
}
.review footer{border-top:1px solid var(--line);padding-top:16px;}

/* ==========================================================================
   13. FAQ
   ========================================================================== */

.faq{border-top:1px solid var(--line);}
.faq__item{border-bottom:1px solid var(--line);}
.faq__q{
  width:100%;background:none;border:0;text-align:left;
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:clamp(20px,2.4vw,28px) 0;
  font-family:var(--display);font-variation-settings:"SOFT" 0,"WONK" 1;
  font-size:clamp(18px,2.1vw,26px);font-weight:400;letter-spacing:-.02em;line-height:1.25;
  color:var(--ink);transition:color .16s ease;
}
.faq__q:hover{color:var(--accent);}
.faq__icon{
  flex:none;width:26px;height:26px;border:1px solid var(--line-2);border-radius:50%;
  position:relative;margin-top:.2em;transition:border-color .2s ease,transform .3s ease;
}
.faq__icon::before,.faq__icon::after{
  content:"";position:absolute;inset:0;margin:auto;background:var(--ink-2);
  transition:opacity .2s ease,background-color .2s ease;
}
.faq__icon::before{width:11px;height:1.5px;}
.faq__icon::after{width:1.5px;height:11px;}
.faq__q[aria-expanded="true"] .faq__icon{border-color:var(--accent);transform:rotate(180deg);}
.faq__q[aria-expanded="true"] .faq__icon::after{opacity:0;}
.faq__q[aria-expanded="true"] .faq__icon::before{background:var(--accent);}
.faq__a{overflow:hidden;height:0;transition:height .3s cubic-bezier(.4,0,.2,1);}
.faq__a-inner{padding:0 0 clamp(22px,2.6vw,30px);max-width:64ch;color:var(--ink-2);}
.faq__a-inner p:last-child{margin-bottom:0;}

/* ==========================================================================
   14. FORMS
   ========================================================================== */

.form{max-width:100%;}
.form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
@media (max-width:680px){ .form__grid{grid-template-columns:1fr;} }
.field{display:flex;flex-direction:column;gap:8px;}
.field--full{grid-column:1/-1;}
.field label{
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2);display:flex;gap:6px;align-items:baseline;
}
.field label .req{color:var(--accent);}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="url"],
.field input[type="search"],
.field input[type="password"],
.field select,
.field textarea{
  width:100%;background:var(--surface-2);color:var(--ink);
  border:1px solid var(--line-2);border-radius:var(--radius);
  padding:14px 15px;font-size:16px;font-family:var(--body);
  transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
}
/* Firefox keeps drawing its arrow unless the text colour is made transparent
   on the button face, and IE/Edge legacy needs the expand pseudo removed. */
.field select::-ms-expand{display:none;}
[data-theme="dark"] .field input,[data-theme="dark"] .field select,[data-theme="dark"] .field textarea{background:var(--surface);}
.field textarea{min-height:140px;resize:vertical;line-height:1.6;}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23556468' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  background-size:12px 8px;
  padding-right:40px;
}
[data-theme="dark"] .field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%237E8494' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  background-size:12px 8px;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3);opacity:1;}
.field .hint{font-size:13px;color:var(--ink-3);}
.field.has-error input,
.field.has-error select,
.field.has-error textarea{
  border-color:var(--err);
  background-color:var(--err-soft);
}
.field__error{
  font-size:13.5px;color:var(--err);display:none;align-items:center;gap:6px;
}
.field__error svg{width:15px;height:15px;flex:none;}
.field.has-error .field__error{display:flex;}

.checkbox{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);line-height:1.55;cursor:pointer;}
.checkbox input{
  appearance:none;-webkit-appearance:none;width:24px;height:24px;flex:none;margin-top:0;
  border:1px solid var(--line-2);border-radius:3px;background:var(--surface-2);
  transition:background-color .15s ease,border-color .15s ease;position:relative;cursor:pointer;
}
.checkbox input:checked{background:var(--accent);border-color:var(--accent);}
.checkbox input:checked::after{
  content:"";position:absolute;left:8px;top:4px;width:6px;height:11px;
  border:solid var(--accent-ink);border-width:0 2px 2px 0;transform:rotate(42deg);
}
.checkbox input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* Radio pills */
.pills{display:flex;gap:9px;flex-wrap:wrap;}
.pills label{
  font-family:var(--body);font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink-2);
  border:1px solid var(--line-2);border-radius:999px;padding:9px 17px;cursor:pointer;
  transition:all .15s ease;
}
.pills input{position:absolute;opacity:0;width:0;height:0;}
.pills input:checked + label{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
.pills input:focus-visible + label{outline:2px solid var(--accent);outline-offset:2px;}

/* Password toggle */
.pw-wrap{position:relative;}
.pw-toggle{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:none;border:0;padding:8px;color:var(--ink-3);display:inline-flex;border-radius:3px;
}
.pw-toggle:hover{color:var(--accent);}
.pw-toggle svg{width:19px;height:19px;}
.pw-toggle .icon-off{display:none;}
.pw-toggle.is-on .icon-on{display:none;}
.pw-toggle.is-on .icon-off{display:block;}

/* Form states */
.form__status{
  display:none;border-radius:var(--radius-lg);padding:18px 20px;margin-bottom:24px;
  font-size:15.5px;line-height:1.55;border:1px solid transparent;
}
.form__status.is-shown{display:flex;gap:13px;align-items:flex-start;}
.form__status--error{background:var(--err-soft);border-color:var(--err);color:var(--err);}
.form__status--ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ok);}
.form__status svg{width:20px;height:20px;flex:none;margin-top:1px;}
.form__status strong{display:block;margin-bottom:2px;}

.form-success{
  text-align:left;border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--surface);padding:clamp(30px,4vw,52px);
}
.form-success__mark{
  width:56px;height:56px;border-radius:50%;background:var(--ok-soft);border:1px solid var(--ok);
  display:grid;place-items:center;color:var(--ok);margin-bottom:24px;
}
.form-success__mark svg{width:26px;height:26px;}
.form-success h3{margin:0 0 12px;}
.form-success p{color:var(--ink-2);max-width:54ch;}

.form-foot{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:26px;}
.form-foot .note{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);}

/* Spinner */
.spinner{
  width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:spin .7s linear infinite;display:none;
}
.btn.is-busy .spinner{display:block;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ==========================================================================
   15. SEARCH
   ========================================================================== */

.search-overlay{
  position:fixed;inset:0;z-index:1100;background:var(--bg);
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
}
.search-overlay.is-open{opacity:1;visibility:visible;transform:translateY(0);}
.search-overlay__top{
  display:flex;align-items:center;justify-content:space-between;min-height:76px;
  padding-inline:var(--gutter);border-bottom:1px solid var(--line);flex:none;
}
.search-overlay__body{padding:clamp(34px,6vw,72px) var(--gutter);overflow-y:auto;flex:1;}
.search-overlay form{max-width:var(--maxw);margin-inline:auto;position:relative;}
.search-overlay input[type="search"]{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-2);
  font-family:var(--display);font-variation-settings:"SOFT" 0,"WONK" 1;
  font-size:clamp(26px,5vw,58px);font-weight:300;letter-spacing:-.025em;color:var(--ink);
  padding:0 60px 18px 0;-webkit-appearance:none;appearance:none;
}
.search-overlay input[type="search"]::placeholder{color:var(--ink-3);}
.search-overlay input[type="search"]:focus{outline:none;border-bottom-color:var(--accent);}
.search-overlay .search-submit{
  position:absolute;right:0;bottom:18px;background:none;border:0;color:var(--accent);padding:6px;
}
.search-overlay .search-submit svg{width:26px;height:26px;}
.search-hint{
  max-width:var(--maxw);margin:26px auto 0;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
}
.search-suggest{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px;}
.search-suggest a{
  font-family:var(--body);font-size:14px;text-decoration:none;color:var(--ink-2);
  border:1px solid var(--line-2);border-radius:999px;padding:8px 16px;transition:all .15s ease;
}
.search-suggest a:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);}

.result-list{border-top:1px solid var(--line);}
.result{
  display:block;padding:clamp(22px,3vw,32px) 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;transition:padding-left .2s ease;
}
.result:hover{padding-left:12px;}
.result__type{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);}
.result h2{font-size:clamp(21px,2.6vw,32px);margin:9px 0 8px;}
.result p{margin:0;color:var(--ink-2);font-size:15.5px;max-width:70ch;}

/* ==========================================================================
   16. BREADCRUMBS
   ========================================================================== */

.breadcrumbs{
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);padding-block:20px 0;
}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:0 9px;margin:0;padding:0;align-items:center;}
.breadcrumbs a{
  color:var(--ink-3);text-decoration:none;
  display:inline-block;padding-block:6px;
}
.breadcrumbs a:hover{color:var(--accent);}
.breadcrumbs li[aria-current]{color:var(--ink);}
.breadcrumbs .sep{opacity:.55;}

/* ==========================================================================
   17. FOOTER
   ========================================================================== */

.site-footer{
  background-color:var(--foot-bg);color:var(--foot-fg);
  padding-block:clamp(52px,7vw,92px) 0;margin-top:var(--sect-y);
  position:relative;overflow:hidden;
}
/* The heavy one. Everywhere else the colour whispers; here it carries the
   close of the page. Same transform-only animation, so it costs nothing. */
/* z-index 0 rather than -1: `.site-footer` has its own background colour, and
   a negative layer would paint underneath it and vanish. The content is
   lifted to 1 instead. */
.site-footer > *{position:relative;z-index:1;}
.site-footer::before{
  content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 76% at 90% 4%, var(--foot-glow-1), transparent 66%),
    radial-gradient(70% 86% at 6% 96%, var(--foot-glow-2), transparent 70%),
    radial-gradient(92% 64% at 60% 116%, var(--foot-glow-3), transparent 76%);
  will-change:transform;
  animation:meek-foot 46s ease-in-out infinite;
}
@keyframes meek-foot{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%    { transform:translate3d(4%,-3%,0) scale(1.1); }
}
@media (prefers-reduced-motion: reduce){
  .site-footer::before{animation:none;}
}
.site-footer a{color:inherit;}
.footer-top{
  display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(28px,4vw,52px);padding-bottom:clamp(40px,5vw,64px);
}
@media (max-width:960px){ .footer-top{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .footer-top{grid-template-columns:1fr;} }
.footer-brand{font-family:var(--display);font-variation-settings:"SOFT" 0,"WONK" 1;font-weight:600;font-size:27px;letter-spacing:-.025em;margin:0 0 16px;display:block;text-decoration:none;}
.footer-blurb{color:var(--foot-fg-soft);max-width:34ch;font-size:15.5px;}
.footer-col h4{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--foot-fg-faint);margin:0 0 18px;
}
.footer-col ul{list-style:none;margin:0;padding:0;}
.footer-col li{margin-bottom:10px;}
.footer-col a{text-decoration:none;font-size:15px;opacity:.85;transition:opacity .15s ease;}
.footer-col a:hover{opacity:1;text-decoration:underline;}
.footer-bottom{
  border-top:1px solid var(--foot-line);padding-block:24px 30px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--foot-fg-soft);
}
.footer-bottom a{text-decoration:none;}
.footer-bottom a:hover{text-decoration:underline;}
.footer-legal{display:flex;gap:18px;flex-wrap:wrap;}

/* Copy button */
.copy-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:none;border:0;padding:0;margin:-6px;
  min-width:28px;min-height:28px;
  color:inherit;font:inherit;text-align:left;position:relative;
  border-radius:6px;
}
.copy-btn:hover{background:var(--accent-soft);}
.copy-btn .copy-icon{opacity:.5;width:15px;height:15px;flex:none;transition:opacity .15s ease;}
.copy-btn:hover .copy-icon{opacity:1;}
.copy-btn.is-copied .copy-icon{color:var(--ok);opacity:1;}
.copy-flag{
  position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;
  background:var(--ink);color:var(--bg);padding:4px 9px;border-radius:4px;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  opacity:0;transition:opacity .18s ease;pointer-events:none;
}
.copy-btn.is-copied .copy-flag{opacity:1;}

/* ==========================================================================
   18. FLOATING UI
   ========================================================================== */

.float-stack{
  position:fixed;right:clamp(14px,2.4vw,28px);bottom:clamp(72px,7vw,92px);
  z-index:850;display:flex;flex-direction:column;gap:10px;align-items:flex-end;
}
@media (max-width:860px){ .float-stack{bottom:calc(env(safe-area-inset-bottom, 0px) + 86px);} }

.float-btn{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--ink);color:var(--bg);border:0;box-shadow:var(--shadow-lg);
  text-decoration:none;transition:transform .2s ease,background-color .2s ease,opacity .25s ease;
}
.float-btn:hover{transform:translateY(-2px);color:var(--bg);}
.float-btn svg{width:22px;height:22px;}
/* `.float-btn` above paints an opaque disc, and it comes after the shared
   glass rule, so the glass has to be restated here or the back-to-top button
   is the one floating thing that is not made of the same material. */
.float-btn--top{
  opacity:0;visibility:hidden;pointer-events:none;
  color:var(--ink);
  background:var(--glass-bg);
  border:1px solid var(--glass-brd);
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 var(--glass-hi),
    inset 0 -8px 18px -12px var(--glass-lo);
}
.float-btn--top.is-visible{opacity:1;visibility:visible;pointer-events:auto;}
.float-btn--top.is-visible{opacity:1;visibility:visible;pointer-events:auto;}

.float-label{
  position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);
  background:var(--ink);color:var(--bg);padding:7px 13px;border-radius:var(--radius);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .18s ease;
}
.float-wrap{position:relative;display:block;}
.float-wrap:hover .float-label{opacity:1;}
@media (max-width:760px){ .float-label{display:none;} }

/* --------------------------------------------------------------------------
   The dock, a glass shortcut bar that follows you down the page.
   Hides itself when you scroll down and leaves a handle you can tap to
   bring it back. On phones it drops the nav and becomes the sticky CTA,
   so there is never a second bar competing with it.
   -------------------------------------------------------------------------- */

.dock{
  position:fixed;left:50%;bottom:clamp(14px,2.2vw,24px);
  transform:translateX(-50%);
  z-index:860;display:flex;flex-direction:column;align-items:center;gap:8px;
  pointer-events:none;
  max-width:calc(100vw - 20px);
}
.dock > *{pointer-events:auto;}
body.nav-open .dock{opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s;}

.dock__handle{
  width:52px;height:22px;border-radius:999px;display:grid;place-items:center;
  border:1px solid var(--glass-brd);
  color:var(--ink-2);opacity:0;transform:translateY(6px);
  transition:opacity .3s ease, transform .3s ease, color .16s ease;
  pointer-events:none;
}
.dock__handle svg{width:14px;height:14px;transform:rotate(180deg);transition:transform .3s ease;}
.dock__handle:hover{color:var(--accent);}
.dock.is-hidden .dock__handle{
  opacity:1;transform:translateY(0);pointer-events:auto;
  color:var(--accent);border-color:var(--accent-line);
}
.dock.is-hidden .dock__handle::after{
  content:"";position:absolute;inset:-6px;border-radius:999px;
  border:1px solid var(--accent-line);opacity:0;
  animation:nudge 2.6s ease-out 3;
}
.dock__handle{position:relative;}
@keyframes nudge{
  0%{opacity:.55;transform:scale(1);}
  35%{opacity:0;transform:scale(1.5);}
  100%{opacity:0;transform:scale(1.5);}
}
@media (prefers-reduced-motion: reduce){ .dock.is-hidden .dock__handle::after{animation:none;} }
.dock.is-hidden .dock__handle svg{transform:rotate(0deg);}

/* Shape and behaviour only. The glass itself is defined once, above, and
   redeclaring any of it here would quietly override it. */
.dock__inner{
  display:flex;align-items:center;gap:5px;padding:6px;
  border-radius:999px;
  border:1px solid var(--glass-brd);
  transition:transform .38s cubic-bezier(.4,0,.2,1), opacity .26s ease;
  max-width:100%;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .dock__inner,.dock__handle{background:var(--surface);}
}
.dock.is-hidden .dock__inner{
  transform:translateY(calc(100% + 34px));opacity:0;pointer-events:none;
}

.dock__nav{display:flex;align-items:center;gap:2px;}
.dock__nav a{
  display:block;padding:9px 15px;border-radius:999px;text-decoration:none;
  color:var(--ink);font-size:14.5px;font-weight:500;white-space:nowrap;
  transition:background-color .16s ease,color .16s ease;
}
.dock__nav a:hover{background:var(--accent-soft);color:var(--accent);}
.dock__nav a[aria-current="page"]{color:var(--accent);}

.dock__sep{width:1px;height:22px;background:var(--line-2);opacity:.7;margin-inline:3px;flex:none;}

.dock__cta{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:10px 20px;border-radius:999px;text-decoration:none;
  background:var(--accent);color:var(--accent-ink);
  font-size:14.5px;font-weight:600;
  transition:background-color .16s ease;
}
.dock__cta:hover{background:var(--accent-hover);color:var(--accent-ink);}
.dock__cta svg{width:16px;height:16px;flex:none;}

.dock__wa{
  width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:#1FA855;color:#fff;text-decoration:none;transition:background-color .16s ease;
}
.dock__wa:hover{background:#178E46;color:#fff;}
.dock__wa svg{width:20px;height:20px;}

@media (max-width:860px){
  .dock__nav,.dock__sep{display:none;}
  .dock{left:10px;right:10px;transform:none;max-width:none;align-items:stretch;}
  .dock__handle{align-self:center;}
  .dock__inner{width:100%;}
  .dock__cta{flex:1;justify-content:center;}
}

/* Cookie banner */
.cookie{
  position:fixed;left:clamp(12px,2.4vw,28px);bottom:calc(clamp(14px,2.2vw,24px) + 96px);z-index:1150;
  max-width:420px;border:1px solid var(--glass-brd);
  border-radius:var(--radius-lg);padding:22px 24px;
  opacity:0;transform:translateY(14px);visibility:hidden;
  transition:opacity .3s ease,transform .3s ease,visibility .3s;
}
.cookie.is-shown{opacity:1;transform:translateY(0);visibility:visible;}
@media (max-width:760px){
  .cookie{left:10px;right:10px;max-width:none;bottom:calc(env(safe-area-inset-bottom, 0px) + 104px);padding:16px 18px;}
  .cookie h4{font-size:14px;margin-bottom:5px;}
  .cookie p{font-size:13px;margin-bottom:13px;}
  .cookie .btn{padding:9px 15px;font-size:13px;}
}
.cookie h4{font-family:var(--body);font-size:15px;font-weight:600;margin:0 0 8px;letter-spacing:-.005em;}
.cookie p{font-size:14px;color:var(--ink-2);margin:0 0 18px;line-height:1.55;}
.cookie .btn-row{gap:9px;}
.cookie .btn{padding:10px 18px;font-size:13.5px;}

/* ==========================================================================
   19. MODAL
   ========================================================================== */

.modal{
  position:fixed;inset:0;z-index:1300;display:grid;place-items:center;padding:20px;
  opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s;
}
.modal.is-open{opacity:1;visibility:visible;}
.modal__scrim{position:absolute;inset:0;background:rgba(20,16,14,.55);backdrop-filter:blur(3px);}
.modal__panel{
  position:relative;background:var(--bg);border:1px solid var(--line-2);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  max-width:520px;width:100%;padding:clamp(26px,4vw,40px);
  transform:scale(.97) translateY(8px);transition:transform .22s cubic-bezier(.2,.8,.3,1);
  max-height:88vh;overflow-y:auto;
}
.modal.is-open .modal__panel{transform:scale(1) translateY(0);}
.modal__panel h3{margin:0 0 12px;}
.modal__panel p{color:var(--ink-2);margin:0 0 24px;}
.modal__close{position:absolute;top:14px;right:14px;}

/* ==========================================================================
   20. 404 + CONTENT PAGES
   ========================================================================== */

.err404{padding-block:clamp(60px,10vw,140px);}
.err404__code{
  font-family:var(--display);font-variation-settings:"SOFT" 0,"WONK" 1;
  font-size:clamp(90px,22vw,260px);font-weight:300;line-height:.82;letter-spacing:-.05em;
  color:var(--accent);margin:0 0 24px;
}
.err404 h1{font-size:clamp(30px,4.6vw,58px);max-width:16ch;}
.err404__links{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;margin-top:clamp(32px,5vw,56px);}
.err404__links a{background:var(--bg);padding:22px 24px;text-decoration:none;color:var(--ink);transition:background-color .18s ease;display:block;}
.err404__links a:hover{background:var(--accent-soft);}
.err404__links strong{display:block;font-family:var(--display);font-variation-settings:"SOFT" 0,"WONK" 1;font-weight:400;font-size:22px;letter-spacing:-.02em;margin-bottom:5px;}
.err404__links span{font-size:14px;color:var(--ink-2);}

/* Long-form content */
.entry-content{max-width:var(--readable);font-size:17.5px;}
.entry-content > * + *{margin-top:1.15em;}
.entry-content h2{font-size:clamp(25px,3vw,38px);margin-top:1.8em;}
.entry-content h3{font-size:clamp(20px,2.2vw,27px);margin-top:1.6em;}
.entry-content ul,.entry-content ol{padding-left:22px;}
.entry-content li{margin-bottom:.5em;}
.entry-content img{border-radius:var(--radius-lg);}
.entry-content blockquote{
  border-left:2px solid var(--accent);padding-left:26px;margin-block:1.6em;
  font-size:clamp(19px,2.2vw,27px);
}
.entry-content table{width:100%;border-collapse:collapse;font-size:15.5px;}
.entry-content th,.entry-content td{border:1px solid var(--line);padding:11px 14px;text-align:left;}
.entry-content th{background:var(--surface);font-weight:600;}
.table-scroll{overflow-x:auto;}

.updated-stamp{
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);display:flex;align-items:center;gap:9px;flex-wrap:wrap;
}
.updated-stamp .dot{width:4px;height:4px;border-radius:50%;background:var(--line-2);}

/* Team */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(20px,3vw,34px);}
.team-card img{aspect-ratio:4/5;object-fit:cover;width:100%;border-radius:var(--radius-lg);border:1px solid var(--line);margin-bottom:16px;background:var(--surface);}
.team-card__ph{aspect-ratio:4/5;border-radius:var(--radius-lg);border:1px dashed var(--line-2);background:var(--surface);display:grid;place-items:center;margin-bottom:16px;text-align:center;padding:20px;}
.team-card__ph span{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);line-height:1.7;}
.team-card h3{font-size:22px;margin:0 0 4px;}
.team-card p{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin:0;}

/* Map */
.map-frame{
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  aspect-ratio:16/9;background:var(--surface);position:relative;
}
.map-frame iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.75);}
[data-theme="dark"] .map-frame iframe{filter:saturate(.6) invert(.9) hue-rotate(180deg);}
.map-ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;}
.map-ph span{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);line-height:1.8;}

/* Contact split */
.contact-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(32px,5vw,72px);align-items:start;}
@media (max-width:900px){ .contact-split{grid-template-columns:1fr;gap:40px;} }
.contact-card{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);padding:clamp(24px,3vw,32px);}
.contact-card + .contact-card{margin-top:16px;}
.contact-card h3{font-size:21px;margin:0 0 6px;}
.contact-card p{margin:0 0 14px;color:var(--ink-2);font-size:15px;}
.contact-line{
  display:flex;align-items:center;gap:11px;font-size:16px;margin-bottom:10px;
  flex-wrap:wrap;max-width:100%;
}
.contact-line > a,.contact-line > span{min-width:0;overflow-wrap:anywhere;}
.contact-line svg{width:17px;height:17px;color:var(--ink-3);flex:none;}
.contact-line a{text-decoration:none;color:var(--ink);}
.contact-line a:hover{color:var(--accent);}

/* ==========================================================================
   21. MOTION, page load + scroll reveal
   ========================================================================== */

.reveal{opacity:0;transform:translateY(18px);}
.js .reveal{transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);}
.reveal.is-in{opacity:1;transform:none;}
.reveal[data-delay="1"]{transition-delay:.08s;}
.reveal[data-delay="2"]{transition-delay:.16s;}
.reveal[data-delay="3"]{transition-delay:.24s;}
.reveal[data-delay="4"]{transition-delay:.32s;}

/* Hero entrance */
.js .hero-in{opacity:0;transform:translateY(22px);}
.js body.is-loaded .hero-in{
  opacity:1;transform:none;
  transition:opacity .85s cubic-bezier(.2,.7,.3,1), transform .85s cubic-bezier(.2,.7,.3,1);
}
.js body.is-loaded .hero-in:nth-of-type(2){transition-delay:.09s;}
.js body.is-loaded .hero-in:nth-of-type(3){transition-delay:.18s;}
.hero-in[data-in="1"]{transition-delay:.09s;}
.hero-in[data-in="2"]{transition-delay:.18s;}
.hero-in[data-in="3"]{transition-delay:.27s;}
.hero-in[data-in="4"]{transition-delay:.36s;}

/* Page loader */
.loader{
  position:fixed;inset:0;z-index:1500;background:var(--bg);
  display:grid;place-items:center;
  transition:opacity .45s ease .1s, visibility .45s .1s;
}
body.is-loaded .loader{opacity:0;visibility:hidden;pointer-events:none;}
.loader__mark{
  font-family:var(--display);font-variation-settings:"SOFT" 0,"WONK" 1;
  font-weight:600;font-size:30px;letter-spacing:-.025em;color:var(--ink);
  position:relative;padding-bottom:14px;
}
.loader__mark::after{
  content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;
  background:var(--line);overflow:hidden;
}
.loader__bar{
  position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--accent);
  animation:loadbar 1.1s cubic-bezier(.4,0,.2,1) forwards;z-index:1;
}
@keyframes loadbar{ 0%{width:0;} 60%{width:72%;} 100%{width:100%;} }

@media (prefers-reduced-motion: reduce){
  .js .reveal,.js .hero-in{opacity:1!important;transform:none!important;transition:none!important;}
  .loader{display:none;}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}

/* ==========================================================================
   22. WORDPRESS CORE
   ========================================================================== */

.alignleft{float:left;margin:0 1.5em 1em 0;}
.alignright{float:right;margin:0 0 1em 1.5em;}
.aligncenter{margin-inline:auto;display:block;}
.alignwide{max-width:min(1100px,92vw);margin-inline:auto;}
.alignfull{max-width:none;width:100vw;margin-inline:calc(50% - 50vw);}
.wp-caption-text,figcaption{font-size:13.5px;color:var(--ink-3);margin-top:9px;font-family:var(--mono);letter-spacing:.02em;}
.sticky,.gallery-caption,.bypostauthor{}

.pagination{display:flex;gap:8px;flex-wrap:wrap;margin-top:clamp(36px,5vw,60px);}
.pagination .page-numbers{
  min-width:42px;height:42px;display:inline-grid;place-items:center;padding-inline:12px;
  border:1px solid var(--line-2);border-radius:var(--radius);text-decoration:none;color:var(--ink);
  font-size:14.5px;transition:all .15s ease;
}
.pagination .page-numbers:hover{border-color:var(--accent);color:var(--accent);}
.pagination .page-numbers.current{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}

/* Admin bar offset */
.admin-bar .site-header{top:32px;}
@media screen and (max-width:782px){ .admin-bar .site-header{top:46px;} }

/* ==========================================================================
   22b. Display type and the pieces that carry the direction
   ========================================================================== */

h1,
h2,
h3,
h4,
blockquote,
.brand,
.footer-brand,
.loader__mark,
.serif,
.stats__num,
.err404__code,
.faq__q,
.review p,
.search-overlay input[type="search"],
.mobile-nav li a,
.err404__links strong{
  font-family:var(--display);
  font-variation-settings:normal;
}

h1{font-weight:800;letter-spacing:-.042em;line-height:.94;}
h2{font-weight:800;letter-spacing:-.038em;line-height:1.0;}
h3,
h4{font-weight:700;letter-spacing:-.03em;}
blockquote{font-weight:600;letter-spacing:-.032em;line-height:1.1;}
.brand,
.footer-brand,
.loader__mark{font-weight:800;letter-spacing:-.04em;}

/* The accent word is a colour change, not an italic. */
.hero h1 em{font-style:normal;color:var(--accent);}

/* Ambient glow behind the hero, the one atmospheric flourish. */
.hero,
.err404{position:relative;overflow:hidden;}
.hero::before,
.err404::before{
  content:"";position:absolute;left:-14%;bottom:-30%;width:64%;aspect-ratio:1;
  background:radial-gradient(circle, var(--glow), transparent 68%);
  pointer-events:none;z-index:0;
}
.hero > *,
.err404 > *{position:relative;z-index:1;}

/* Numbers lead in this direction. */
.stats__num{
  color:var(--accent);font-weight:800;letter-spacing:-.045em;
}
.process__n{font-weight:500;}

/* Work becomes cards rather than plates with text underneath. */
.work-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;padding-bottom:24px;
  transition:border-color .2s ease, transform .2s ease;
}
.work-card:hover{border-color:var(--accent-line);transform:translateY(-2px);}
.work-card__media{
  border:0;border-radius:0;border-bottom:1px solid var(--line);margin-bottom:20px;
}
.work-card__meta,
.work-card h3,
.work-card p,
.work-card__result{margin-inline:22px;}

.work-card__result{color:#1F49D6;}
[data-theme="dark"] .work-card__result{color:#8FB0FF;}
.review{border-radius:var(--radius-lg);}
.review p{font-weight:500;letter-spacing:-.02em;line-height:1.35;}
.faq__q{font-weight:700;letter-spacing:-.028em;}
.search-overlay input[type="search"]{font-weight:700;letter-spacing:-.04em;}
.mobile-nav li a{font-weight:700;letter-spacing:-.035em;}
.err404__code{font-weight:800;letter-spacing:-.055em;}

/* The closing band goes from flat dark to the accent itself. */
.section--ink{
  background:linear-gradient(118deg, var(--band-bg), color-mix(in srgb, var(--band-bg) 58%, #0A1030));
}
.btn--onink{border-color:rgba(255,255,255,.55);color:#fff;}
.btn--onink:hover{background:rgba(255,255,255,.12);color:#fff;}
.btn--onink.btn--solid{background:#fff;color:var(--band-bg);border-color:#fff;}
.btn--onink.btn--solid:hover{background:#EDF1FF;color:var(--band-bg);border-color:#EDF1FF;}

.cookie,
.modal__panel,
.contact-card,
.form-success,
.cs-meta,
.err404__links,
.process,
.map-frame{border-radius:var(--radius-lg);}

.float-btn{border-radius:50%;}
.icon-btn{border-radius:999px;}
.field input,
.field select,
.field textarea{border-radius:var(--radius);}
.pagination .page-numbers{border-radius:999px;}

/* ==========================================================================
   23. PRINT
   ========================================================================== */

@media print{
  .site-header,.site-footer,.float-stack,.dock,.cookie,.scroll-progress,.loader,.mobile-nav,.search-overlay{display:none!important;}
  body{background:#fff;color:#000;font-size:12pt;}
  a{color:#000;text-decoration:underline;}
  .reveal,.hero-in{opacity:1!important;transform:none!important;}
}

/* -------------------------------------------------------------------------
   Answer-shaped blocks
   -------------------------------------------------------------------------
   These exist to be quoted. The visual job is to look like a considered
   statement rather than a callout box, because a callout reads as marketing
   and a statement reads as a fact.
   ---------------------------------------------------------------------- */

.answer-box{
  border-radius:var(--radius-lg);
  padding:clamp(20px,3vw,30px) clamp(22px,3.4vw,34px);
  max-width:var(--readable);
  border-left:3px solid var(--accent);
}

.answer-box__label{
  font-family:var(--mono,ui-monospace,monospace);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 10px;
}

.answer-box__text{
  margin:0;
  font-size:clamp(17px,1.8vw,20px);
  line-height:1.55;
  color:var(--ink);
  text-wrap:pretty;
}

/* The facts table. A real definition list, so a screen reader and a parser
   both get the pairing without having to infer it from the layout. */
.keyfacts{
  margin:0;
  display:grid;
  gap:0;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  max-width:var(--readable);
}

.keyfacts__row{
  display:grid;
  grid-template-columns:minmax(140px,34%) 1fr;
  gap:0;
  border-bottom:1px solid var(--line);
}
.keyfacts__row:last-child{border-bottom:0;}

.keyfacts dt{
  padding:13px 18px;
  font-size:13px;
  letter-spacing:.01em;
  color:var(--ink-2);
  background:var(--surface);
  margin:0;
}

.keyfacts dd{
  padding:13px 18px;
  margin:0;
  font-size:15px;
  color:var(--ink);
}

@media (max-width:560px){
  .keyfacts__row{grid-template-columns:1fr;}
  .keyfacts dt{padding-bottom:2px;background:transparent;}
  .keyfacts dd{padding-top:0;font-weight:500;}
}

/* Contents. Only ever rendered on long pages, so it can afford to be plain. */
.toc{
  border-radius:var(--radius-lg);
  padding:20px 24px;
  margin:0 0 34px;
  max-width:var(--readable);
}

.toc__label{
  font-family:var(--mono,ui-monospace,monospace);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin:0 0 10px;
}

.toc ol{
  margin:0;
  padding-left:1.2em;
  display:grid;
  gap:6px;
}

.toc a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.toc a:hover{color:var(--accent);border-bottom-color:var(--accent-line);}

/* Related reading. Its only job is to make an orphan page impossible. */
.related{margin-block:var(--sect-y);}
.related__h{font-size:clamp(20px,2.4vw,26px);margin:0 0 22px;}

.related__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}

.related__item{border-radius:var(--radius-lg);overflow:hidden;}

.related__item a{
  display:block;
  padding:20px 22px;
  text-decoration:none;
  color:inherit;
}

.related__title{
  display:block;
  font-weight:600;
  margin-bottom:6px;
  color:var(--ink);
}
.related__item a:hover .related__title{color:var(--accent);}

.related__ex{
  display:block;
  font-size:14px;
  line-height:1.5;
  color:var(--ink-2);
}

/* -------------------------------------------------------------------------
   The web design page
   -------------------------------------------------------------------------
   The commercial page. Its visual job is to be scannable: someone deciding
   between three studios reads the price, the timescale and the list of what
   is included, in that order, and leaves. Everything here is built for that
   reading rather than for a leisurely scroll.
   ---------------------------------------------------------------------- */

.wd-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
}

.wd-card{
  border-radius:var(--radius-lg);
  padding:26px 26px 28px;
}

.wd-card__n{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--accent);
  margin-bottom:14px;
}

.wd-card h3{
  font-size:clamp(17px,1.7vw,20px);
  margin:0 0 8px;
  line-height:1.25;
}

.wd-card p{
  margin:0;
  font-size:14px;
  line-height:1.6;
  color:var(--ink-2);
}

/* The kinds of website. A plain two-column list, because these are categories
   of one service and dressing them as cards would make them look like six
   separate businesses, which is the exact impression to avoid. */
.wd-types{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:0;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  border-top:1px solid var(--line);
}

.wd-types li{
  padding:24px 0 26px;
  border-bottom:1px solid var(--line);
  padding-right:32px;
}

.wd-types h3{
  font-size:clamp(16px,1.6vw,19px);
  margin:0 0 7px;
}

.wd-types p{
  margin:0;
  font-size:14px;
  line-height:1.6;
  color:var(--ink-2);
  max-width:46ch;
}

/* Pricing. The number is the largest thing on the page after the H1, because
   it is the fact none of the competing sites will give a visitor at all. */
.price-lead{
  border-radius:var(--radius-lg);
  padding:clamp(26px,4vw,40px);
  text-align:center;
  max-width:640px;
  margin:0 auto 34px;
  border-top:3px solid var(--accent);
}

.price-lead__label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin:0 0 10px;
}

.price-lead__n{
  /* Archivo rather than the display face on purpose. Bricolage is drawn for
     headlines and its currency glyphs are not its strong suit; the naira sign
     sits badly against the digits at this size. A text face with full currency
     coverage is the safer choice for the one number that must be unambiguous. */
  font-family:var(--body);
  font-size:clamp(38px,6vw,62px);
  line-height:1.05;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--ink);
  margin:0 0 16px;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* A little air after the currency symbol, which most faces set tight. */
.price-lead__n{ word-spacing:.02em; }

.price-lead__note{
  margin:0;
  font-size:14px;
  line-height:1.6;
  color:var(--ink-2);
  max-width:48ch;
  margin-inline:auto;
}

.price-tiers{
  list-style:none;
  margin:0 0 26px;
  padding:0;
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}

.price-tier{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:24px;
  background:var(--surface);
}

.price-tier h3{
  font-size:16px;
  margin:0 0 6px;
}

.price-tier__n{
  font-family:var(--body);
  font-weight:600;
  font-size:15px;
  color:var(--accent);
  margin:0 0 12px;
  font-variant-numeric:tabular-nums;
}

.price-tier p:last-child{
  margin:0;
  font-size:14px;
  line-height:1.6;
  color:var(--ink-2);
}

.price-after{
  max-width:var(--readable);
  margin:0 auto;
  font-size:14px;
  line-height:1.65;
  color:var(--ink-2);
  text-align:center;
}

@media (max-width:600px){
  .wd-types li{padding-right:0;}
}

/* -------------------------------------------------------------------------
   The three costs, and the terms
   -------------------------------------------------------------------------
   The costs are set as three distinct panels rather than a table, because the
   whole point of the block is that they are three separate things a client
   pays for. A table would imply they are three rows of one bill, which is the
   exact misunderstanding this section exists to prevent.
   ---------------------------------------------------------------------- */

.costs{margin:0 0 clamp(34px,5vw,54px);}

.costs__lead{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin:0 0 18px;
}

.costs__list{
  list-style:none;
  margin:0 0 24px;
  padding:0;
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(262px,1fr));
}

.cost{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:24px 24px 26px;
  background:var(--surface);
  display:flex;
  flex-direction:column;
}

/* The optional one is drawn quieter on purpose. It is the one clients most
   often think is compulsory, and making it look less like the others is the
   fastest way to say otherwise. */
.cost--maintenance{
  background:transparent;
  border-style:dashed;
}

.cost__head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}

.cost__head h3{
  font-size:16px;
  margin:0;
  line-height:1.3;
}

.cost__when{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-2);
  white-space:nowrap;
}

.cost__price{
  font-family:var(--body);
  font-weight:700;
  font-size:clamp(19px,2.1vw,23px);
  color:var(--accent);
  margin:0 0 12px;
  font-variant-numeric:tabular-nums;
  line-height:1.2;
}

.cost__body{
  margin:0;
  font-size:14px;
  line-height:1.6;
  color:var(--ink-2);
}

.costs__total{
  margin:0;
  padding:18px 22px;
  border-left:3px solid var(--accent);
  background:var(--accent-soft);
  border-radius:0 var(--radius) var(--radius) 0;
  font-size:15px;
  line-height:1.6;
  color:var(--ink);
  max-width:var(--readable);
}

/* The terms. Set as a reading column rather than cards: these are answers to
   awkward questions, and a card makes an awkward answer look like a boast. */
.terms{
  display:grid;
  gap:0;
  max-width:var(--readable);
  border-top:1px solid var(--line);
}

.term{
  padding:22px 0 24px;
  border-bottom:1px solid var(--line);
}

.term__q{
  font-size:clamp(16px,1.7vw,19px);
  margin:0 0 8px;
  line-height:1.3;
}

.term__a{
  margin:0;
  font-size:15px;
  line-height:1.68;
  color:var(--ink-2);
}