/* ============================================================
   GWS — Liquid Glass
   The material from the GWS Design System (tokens/glass.css +
   components/glass/GlassSurface.jsx), ported to plain CSS for the
   hand-coded site. One recipe, composed by every .glass surface:
   tint · clear centre · refraction confined to the rim · fixed
   upper-left specular · one soft shadow.

   Four rules from the system's readme govern where it may appear:
     1. Radius 2/4 and the two shadows are properties of THE MATERIAL.
        Solid surfaces stay square.
     2. Glass needs something to bend — a ground seam, a figure, a
        photograph. Never add variation to a background to justify it.
     3. One glass surface in view at a time, plus the navigation.
     4. Content-heavy surfaces (prose, tables, forms) stay solid.
   ============================================================ */

:root{
  /* Tint — a temperature shift, not a colour. */
  --glass-tint-dark:rgba(243,239,229,.055);
  --glass-tint-light:rgba(17,40,32,.04);

  /* Optics — clear centre, refraction confined to the rim. */
  --glass-blur-core:2.5px;
  --glass-blur-edge:16px;
  --glass-sat-core:1.06;
  --glass-sat-edge:1.12;
  --glass-bright-core:1.03;
  --glass-rim-control:18px;
  --glass-rim-panel:22px;
  --glass-rim-badge:10px;

  /* Geometry — the only non-zero radii in the system. */
  --glass-radius-control:2px;
  --glass-radius-panel:4px;

  /* Light — fixed upper left, identical in every application. */
  --glass-hi-top:rgba(243,239,229,.30);
  --glass-hi-side:rgba(243,239,229,.10);
  --glass-hi-base:rgba(243,239,229,.16);
  --glass-hi-top-light:rgba(243,239,229,.55);
  --glass-hi-side-light:rgba(17,40,32,.06);
  --glass-hi-base-light:rgba(17,40,32,.10);
  --glass-sheen:linear-gradient(148deg,rgba(243,239,229,.14) 0,rgba(243,239,229,0) 34%,rgba(243,239,229,0) 74%,rgba(243,239,229,.06) 100%);
  --glass-shadow:4px 18px 40px -22px rgba(12,29,23,.50),1px 2px 6px -3px rgba(12,29,23,.30);

  /* Motion — opacity and position only. */
  --glass-motion:180ms;
  --glass-ease:cubic-bezier(.22,.61,.36,1);
  --glass-light-track:120ms linear;
  --glass-light-radius:160px;

  /* Hover and press fills. */
  --glass-hover-dark:rgba(243,239,229,.10);
  --glass-hover-light:rgba(17,40,32,.07);

  /* Tier 3 — no transparency. The automatic fallback. */
  --glass-solid-dark:#193329;
  --glass-solid-light:#EAE5D8;
}

/* The pointer-tracked highlight. Registered so it interpolates instead
   of snapping; where @property is unsupported the light simply jumps. */
/* Inherited, so the sheen pseudo-element sees the value glass.js sets on
   the surface itself; registered, so it interpolates instead of snapping.
   Where @property is unsupported the light simply jumps to the pointer. */
@property --gx{syntax:"<length>";inherits:true;initial-value:-9999px}
@property --gy{syntax:"<length>";inherits:true;initial-value:-9999px}

/* ---- The material ------------------------------------------------ */

.glass{
  position:relative;
  isolation:isolate;
  border-radius:var(--glass-radius-panel);
  background:var(--glass-tint-dark);
  -webkit-backdrop-filter:blur(var(--glass-blur-core)) saturate(var(--glass-sat-core)) brightness(var(--glass-bright-core));
  backdrop-filter:blur(var(--glass-blur-core)) saturate(var(--glass-sat-core)) brightness(var(--glass-bright-core));
  box-shadow:
    inset 0 1px 0 var(--glass-hi-top),
    inset 1px 0 0 var(--glass-hi-side),
    inset -1px 0 0 var(--glass-hi-side),
    inset 0 -1px 0 var(--glass-hi-base),
    var(--glass-shadow);
  color:var(--cream);
  transition:--gx var(--glass-light-track),--gy var(--glass-light-track);
}

/* The rim. Carries the heavy blur, masked to a frame so the centre
   stays clear — the whole optical idea of the material. */
.glass::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  padding:var(--glass-rim-panel);
  border-radius:inherit;
  pointer-events:none;
  -webkit-backdrop-filter:blur(var(--glass-blur-edge)) saturate(var(--glass-sat-edge));
  backdrop-filter:blur(var(--glass-blur-edge)) saturate(var(--glass-sat-edge));
  -webkit-mask-image:linear-gradient(#000,#000),linear-gradient(#000,#000);
  -webkit-mask-clip:border-box,padding-box;
  -webkit-mask-composite:xor;
  mask-image:linear-gradient(#000,#000),linear-gradient(#000,#000);
  mask-clip:border-box,padding-box;
  mask-composite:exclude;
}

/* The sheen. Fixed upper-left specular, plus the pointer light. */
.glass::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(var(--glass-light-radius) circle at var(--gx) var(--gy),rgba(243,239,229,.09),rgba(243,239,229,0) 70%),
    var(--glass-sheen);
}

/* ---- Ground ------------------------------------------------------ */

.glass--cream{
  background:var(--glass-tint-light);
  box-shadow:
    inset 0 1px 0 var(--glass-hi-top-light),
    inset -1px 0 0 var(--glass-hi-side-light),
    inset 0 -1px 0 var(--glass-hi-base-light),
    var(--glass-shadow);
  color:var(--ink);
}
.glass--cream::after{
  background:
    radial-gradient(var(--glass-light-radius) circle at var(--gx) var(--gy),rgba(243,239,229,.55),rgba(243,239,229,0) 70%),
    var(--glass-sheen);
}

/* ---- Shape — rim and radius travel together ---------------------- */

.glass--control{border-radius:var(--glass-radius-control)}
.glass--control::before{padding:var(--glass-rim-control)}

.glass--badge{border-radius:var(--glass-radius-control)}
.glass--badge::before{padding:var(--glass-rim-badge)}

/* ---- Scrim — the one deviation from tokens/glass.css --------------
   The material's clear centre (2.5px, tint at .04–.055) is specified
   for a surface sitting on a GROUND, a figure or a diagram, where
   nothing behind it competes with its own type. Two surfaces here sit
   on something busier: the navigation rides over running prose, and
   the gallery caption sits on a photograph. At the token values the
   paragraph and the picture read straight through the text on top.

   Scrim keeps the whole construction — rim refraction, specular,
   pointer light — and only makes the centre opaque enough to carry
   type, widening the rim so the refraction still reads against it.
   Used on exactly those two surfaces; every other glass surface on
   the site uses the token values unchanged. */

.glass--scrim{
  --glass-blur-core:15px;
  --glass-blur-edge:32px;
  --glass-sat-core:1.1;
  background:rgba(17,40,32,.70);
}
.glass--scrim.glass--cream{background:rgba(243,239,229,.72)}

/* ---- Tier 3: no transparency -------------------------------------
   Print, email, and every browser without backdrop-filter. */

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .glass{
    background:var(--glass-solid-dark);
    box-shadow:none;
    border:1px solid var(--hairline-on-green);
  }
  .glass--cream{
    background:var(--glass-solid-light);
    border-color:var(--hairline-on-cream);
  }
  .glass::before,.glass::after{display:none}
}

@media print{
  .glass{background:var(--glass-solid-dark);box-shadow:none}
  .glass--cream{background:var(--glass-solid-light)}
  .glass::before,.glass::after{display:none}
}

@media (prefers-reduced-motion:reduce){
  .glass::after{transition:none}
  .glass{--gx:-9999px;--gy:-9999px}
}

/* ==================================================================
   APPLICATIONS
   Each one sits where the ground behind it already changes.
   ================================================================== */

/* ---- 1. The navigation ------------------------------------------
   The strongest case for the material: a bar that must stay above a
   page alternating between green and cream without taking a ground
   of its own. */

.site-header{
  position:sticky;
  top:14px;
  z-index:50;
  background:none;
  border-bottom:0;
  padding:14px 0 0;
  transition:transform .3s ease;
}
.site-header .header-inner{
  min-height:0;
  padding:10px clamp(16px,2.2vw,26px);
}
.header-glass{
  max-width:var(--wrap);
  margin-left:max(var(--pad),calc(50vw - var(--wrap) / 2));
  margin-right:max(var(--pad),calc(50vw - var(--wrap) / 2));
  transition:background-color 300ms var(--glass-ease),transform .3s ease;
}
/* The nav lockup is ring + wordmark at 8.67:1, so its height is set by
   how wide the bar can afford to be, not by the ring. 34px puts the
   wordmark cap at ~10px — the smallest size this serif still reads. */
.header-glass .brand-logo-h{height:34px}
/* The old bar was built around a ~95px mark. At 295px the links no
   longer fit beside it below ~1024px, so the nav drops to its own row
   there — the same second-row layout the site already used below
   820px, just brought forward. The auto-hide on scroll stays with
   styles.css's 820px rules; nothing here sets max-height, so it is
   left alone.
   With Tools at the end of the row, one row needs ~1240px, so the
   second row starts there. */
/* Tablets and small laptops: the bar stays ONE row. A second row of
   links read as a broken layout and cost ~70px of every screen.
   1101–1240px: the same links, tightened. ≤1100px: the mark, the
   call to action and a Menu button (glass.js), the links in a panel. */
@media (max-width:1240px){
  .header-glass .brand-logo-h{height:28px}
  .header-glass .nav{gap:16px;font-size:14px}
  .header-glass .header-right{gap:18px}
}
/* without script there is no Menu button: the links keep a row of
   their own rather than overflowing the bar */
@media (max-width:1100px){
  .site-header:not(.has-menu) .header-glass .header-inner{flex-wrap:wrap}
  .site-header:not(.has-menu) .header-glass .nav{
    display:flex;flex-wrap:wrap;order:3;flex-basis:100%;width:100%;
    justify-content:center;gap:9px 18px;font-size:12.5px;
    padding:10px 0 2px;margin-top:8px;
    border-top:1px solid var(--hairline-on-green);
  }
}
@media (max-width:430px){
  .header-glass .brand-logo-h{height:24px}
}

/* On green — the default. */
.header-glass .nav a,
.header-glass .lang{color:var(--sand)}
.header-glass .nav a:hover,
.header-glass .lang .lang-on,
.header-glass .lang a:hover{color:var(--cream)}

/* On cream — the bar takes the light ground as it crosses onto it,
   the way GlassNav's `ground` prop does. Toggled from glass.js. */
.header-glass.on-cream{
  background:rgba(243,239,229,.72);
  color:var(--ink);
  box-shadow:
    inset 0 1px 0 var(--glass-hi-top-light),
    inset -1px 0 0 var(--glass-hi-side-light),
    inset 0 -1px 0 var(--glass-hi-base-light),
    var(--glass-shadow);
}
.header-glass.on-cream::after{
  background:
    radial-gradient(var(--glass-light-radius) circle at var(--gx) var(--gy),rgba(243,239,229,.55),rgba(243,239,229,0) 70%),
    var(--glass-sheen);
}
.header-glass.on-cream .nav a,
.header-glass.on-cream .lang{color:var(--warm-grey)}
.header-glass.on-cream .nav a:hover,
.header-glass.on-cream .lang .lang-on,
.header-glass.on-cream .lang a:hover{color:var(--ink)}
/* the second-row rule the mobile nav draws */
.header-glass.on-cream .nav{border-top-color:var(--hairline-on-cream)}

/* The mark crossfades with the ground rather than being recoloured. */
.header-glass .brand{position:relative;display:block}
.header-glass .brand-alt{position:absolute;inset:0;opacity:0;transition:opacity 300ms var(--glass-ease)}
.header-glass.on-cream .brand-logo-h{opacity:0}
.header-glass.on-cream .brand-alt{opacity:1}
.header-glass .brand-logo-h{transition:opacity 300ms var(--glass-ease)}

/* The page no longer starts under a solid bar, so reclaim the space
   the old header occupied. */
.hero{padding-top:clamp(24px,3.4vw,44px)}

/* ---- 1a. The photographic hero ----------------------------------
   The homepage opens on a full-bleed photograph. Scoped to
   body.hero-photo so the other pages keep the flat-ground hero and
   their own header behaviour.

   Three things make it work:
     · the bar leaves the flow, so the picture fills the viewport and
       the bar floats on it;
     · the image layer is oversized and drifts on scroll (parallax.js),
       so the picture sits BEHIND the page rather than on it;
     · the scrim that carries the type does NOT move with the picture —
       if it did, the dark part would slide off the words mid-scroll. */

.hero-photo .site-header{position:fixed;top:0;left:0;right:0;padding:14px 0 0}
/* the other pages that open on a photograph (the domain pages and
   Transparency): the bar floats on it too, and the opening clears it */
.photo-top .site-header{position:fixed;top:0;left:0;right:0;padding:14px 0 0}
.photo-top .page-intro{padding-top:max(calc(var(--band) + 36px),130px)}
.photo-top section[id],.photo-top .svc-card{scroll-margin-top:110px}
@media (max-width:820px){.photo-top section[id],.photo-top .svc-card{scroll-margin-top:96px}}

.hero-photo .hero{
  min-height:100svh;
  display:flex;
  align-items:stretch;
  padding-top:0;
  padding-bottom:0;
}

/* The image layer — oversized top and bottom so it can drift without
   ever revealing an edge. */
.hero-photo .hero-bg{
  /* the boardroom photo: the figure stands at ~77% of its width. At
     49% he lands in the space right of the framework panel, with his
     reflection in the table below; narrower than ~1500px the panel
     reaches him and he sits at the edge, half in view */
  background-image:url(../assets/img/hero-boardroom.jpg);
  background-size:cover;
  background-position:49% center;
  top:-20%;bottom:auto;height:140%;
  will-change:transform;
}
.hero-photo .hero-bg::after{display:none}

/* The scrim. Dark where the copy sits, clearing to the right so the
   figure and the view stay visible. Pinned to the hero. */
.hero-photo .hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(95deg,
    rgba(12,29,23,.93) 0%,rgba(12,29,23,.82) 30%,rgba(12,29,23,.46) 62%,rgba(12,29,23,.22) 100%);
}

/* Three bands: the slogan high on the left, an open middle the
   picture owns, then the copy, the panel and the chips along the
   bottom. The emptiness in the middle is the point — the photograph
   is doing the work there, so the type stays out of it. */
.hero-photo .hero-grid{
  min-height:0;
  width:100%;
  grid-template-rows:auto 1fr auto;
  row-gap:clamp(24px,3.2vh,40px);
  padding-block:clamp(96px,11vh,160px) clamp(56px,8vh,104px);
  align-items:end;
}
/* The slogan is lifted out of the copy block and dropped a little
   (.4em) — a shift that scales with the headline instead of being a
   fixed pixel nudge. It was two full lines (1.96em) until the "What
   we do" panel needed the room below; now the whole hero, panel
   included, fits a 1440×900 screen. */
.hero-photo .hero-slogan{
  grid-column:1;grid-row:1;align-self:start;
  margin:.4em 0 0;max-width:16ch;
}
.hero-photo .hero-copy{grid-column:1;grid-row:2;align-self:end}
/* The panel spans both upper rows so its height is free to exceed the
   copy block without making the hero taller than one screen; it is
   still bottom-aligned with the copy. It sits on a photograph now, so
   it takes the material and drops its border and corner ticks. */
.hero-photo .hero-grid > .instrument{
  grid-column:2;grid-row:1 / 3;align-self:end;border:0;
}
.hero-photo .hero-grid > .instrument .inst-corner{display:none}
.hero-photo .hero-tags{
  grid-column:1 / -1;grid-row:3;margin-top:clamp(40px,6vh,72px);
}
/* the picture is the hero here, so the headline gives it room */
.hero-photo .hero .display{font-size:clamp(42px,min(6vw,9.4vh),82px)}
.hero-photo .hero .lead{margin-bottom:14px}

/* One column below 1024px — hand placement back to auto flow. */
@media (max-width:1024px){
  .hero-photo .hero-grid{grid-template-rows:none}
  .hero-photo .hero-slogan,
  .hero-photo .hero-copy,
  .hero-photo .hero-grid > .instrument,
  .hero-photo .hero-tags{grid-column:1;grid-row:auto;align-self:auto}
  .hero-photo .hero-slogan{margin-top:0}
}
/* The bar is out of the flow, so the headline must start below it.
   One row (above 1240px) is cleared by the top padding alone; the
   two-row bar (≤1240px) needs more; and from 1024px down the hero is
   one column and the headline loses its drop entirely. */
@media (max-width:1240px){
  .hero-photo .hero-grid{padding-top:128px}
}

/* ---- 1b. The hero chips -----------------------------------------
   Eight badges naming what we do. They read as ONE surface family,
   not eight competing panels: same shape, same rim — which is how the
   system counts a badge group, and why this does not break "one glass
   surface in view".

   On the flat green hero they are carried by the lit edge and the
   pointer light; the moment a photograph goes behind the hero the rim
   has real ground to bend and they come fully alive. */

/* The chips take their own row under BOTH columns, so the framework
   panel keeps its place beside the copy instead of being pushed down
   by the new row. */
.hero-copy{grid-column:1;grid-row:1}
.hero-grid > .instrument{grid-column:2;grid-row:1}

.hero-tags{
  grid-column:1 / -1;
  grid-row:2;
  /* four pairs, one per domain: the row breaks between whole groups
     (4 → 2 columns), never leaving a single chip on a line of its own.
     The panel is the plain material (.glass, neutral — no green scrim),
     so the photo reads through it; only the core blur is raised a
     little, enough to keep the labels legible over the bright water. */
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px clamp(16px,2vw,32px);
  margin:0;
  padding:clamp(20px,2.4vw,30px) clamp(18px,2.4vw,32px) clamp(22px,2.6vw,32px);
  --glass-blur-core:8px;
}
.tags-title{grid-column:1 / -1;margin:0 0 2px;font-family:var(--f-serif);font-weight:400;font-size:clamp(22px,2.1vw,30px);
  line-height:1.15;letter-spacing:-.01em;color:var(--cream)}
/* One line per domain: the core of it, not a list of services (that
   is "How we help" further down). The whole group is the link, and
   opens that domain's slide there. */
.hero-tags a.tag-group{
  display:flex;flex-direction:column;gap:10px;min-width:0;
  margin:-10px -12px;padding:10px 12px 12px;
  color:var(--cream);text-decoration:none;border-radius:var(--glass-radius-control);
  transition:background-color var(--glass-motion) var(--glass-ease);
}
.hero-tags a.tag-group:hover{background:var(--glass-hover-dark)}
.hero-tags a.tag-group:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.tag-label{display:flex;align-items:baseline;gap:10px;margin:0;padding-bottom:10px;
  border-bottom:1px solid rgba(216,211,199,.22);
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cream)}
.tag-n{font-variant-numeric:tabular-nums;letter-spacing:.06em;color:var(--signal)}
.tag-core{font-family:var(--f-serif);font-size:clamp(15.5px,1.15vw,17px);line-height:1.4;color:var(--cream);text-wrap:pretty}
.tag-core::after{content:"\00a0\2192";font-family:var(--f-sans);color:var(--signal);
  display:inline-block;transition:transform .2s ease}
.hero-tags a.tag-group:hover .tag-core::after{transform:translateX(3px)}
@media (max-width:1024px){
  .hero-tags{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px}
}
/* One column below 1024px — hand placement back to auto flow. */
@media (max-width:1024px){
  .hero-copy,.hero-grid > .instrument,.hero-tags{grid-column:1;grid-row:auto}
}
@media (max-width:640px){
  .hero-tags{gap:18px 12px;padding:18px 14px 20px}
}

/* ---- 2. The seam band -------------------------------------------
   The trust strip, lifted off the page and dropped so the green/cream
   boundary passes through its lower RIM — the 22px frame that carries
   the heavy blur, and the only part of the material that refracts.
   The clear centre, and so all of the type, stays on green: no text
   ever crosses the seam, which is what would make it unreadable. */

.trust{
  position:relative;
  z-index:3;
  background:none;
  padding:0;
  margin-bottom:-30px;
  /* The solid version rules the strip off top and bottom, full bleed.
     Glass carries its own edge, so the rules would read as two stray
     lines running out from under a floating object. */
  border-top:0;
  border-bottom:0;
}
.trust-row{
  border:0;
  padding:6px;
}
.trust-cell{
  border-left:1px solid var(--glass-hi-side);
  padding:30px 20px 34px;
}
.trust-cell:first-child{border-left:0}
@media (max-width:860px){
  .trust-cell:nth-child(n+3){border-top-color:var(--glass-hi-side)}
}
.trust-label{color:var(--cream)}
/* the strip hangs 30px into whatever follows it: the proof line */
.trust-proof{padding-top:calc(clamp(40px,5vw,64px) + 30px);padding-bottom:clamp(40px,5vw,64px)}

/* ---- 3. Over photography ----------------------------------------
   The office galleries are the only real photography on the site, and
   so the one place a caption can sit on the picture rather than under
   it. The diagrams are deliberately left alone: they are too dense to
   host a surface without covering the thing being explained. */

.loc-cap.glass{
  position:relative;
  z-index:2;
  max-width:min(620px,88%);
  margin:-56px 0 0 20px;
  padding:22px 26px;
  color:var(--cream);
}

/* ---- 4. The domain panel ----------------------------------------
   The one panel on the site that is a single object you select rather
   than a page of content: five of them share one slot, one shown at a
   time. The material replaces the hairline box — its own edge now
   carries the specular, so the drawn border and the institutional
   corner ticks come off.

   It sits on flat cream, so there is little behind it to refract; what
   carries the material here is the lit top edge, the shadow that lifts
   it off the ground, and the pointer light. Token values throughout —
   no scrim: nothing behind competes with the type. */

.dom-panel.glass{
  border:0;
  padding:clamp(30px,3.2vw,46px);
}
.dom-panel.glass .inst-corner{display:none}
/* phones: the card already sits inside the page gutter; 30px more on
   each side left the text a 275px column */
@media (max-width:640px){.dom-panel.glass{padding:26px 20px}}
/* The hairlines inside the panel are content, not the container, and
   stay exactly as they are on the solid version. */

/* ---- Anchor landings --------------------------------------------
   The bar is out of the flow on the photographic hero, so a jump to
   #approach or #contact would otherwise put the heading underneath
   it. Two rows of bar below 1024px needs more room. */

.hero-photo section[id]{scroll-margin-top:110px}

/* nav labels never break inside themselves, and the mark and the
   button never give up width to the links */
.header-glass .nav a{white-space:nowrap}
.header-glass .brand,.header-glass .header-right{flex-shrink:0}
.header-glass .header-right .btn-cta{white-space:nowrap}

/* ---- Tools in the bar ---------------------------------------------
   Not pages like the others, so they stand apart: last in the row,
   behind a hairline, as an outlined control in the accent that opens
   a menu. (A literal blue: system.html runs its own palette, where
   --signal is orange.) */
.header-glass .nav-tools{position:relative;display:inline-flex;margin-left:12px;--tool:#9FC7E8}
.header-glass .nav-tools::before{
  content:"";position:absolute;left:-15px;top:50%;width:1px;height:18px;
  background:rgba(216,211,199,.16);transform:translateY(-50%);
}
.nav-tools-btn{
  display:inline-flex;align-items:center;gap:9px;
  font:inherit;font-size:.9em;font-weight:600;letter-spacing:.01em;color:var(--tool);
  background:transparent;border:1px solid rgba(159,199,232,.55);border-radius:var(--glass-radius-control);
  padding:6px 12px;cursor:pointer;white-space:nowrap;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.nav-tools-btn::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}
.nav-tools-btn[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
.nav-tools-btn:hover,.nav-tools-btn[aria-expanded="true"]{background:rgba(159,199,232,.14);border-color:var(--tool);color:var(--cream)}
.nav-tools-btn.is-current{background:rgba(159,199,232,.16);border-color:var(--tool)}
.nav-tools-btn:focus-visible{outline:2px solid var(--tool);outline-offset:3px}

/* The menu hangs from the button's right edge. It sits inside the bar,
   whose own blur is the backdrop root, so it can't blur the page below:
   the surface is near-solid instead. */
.nav-tools-menu{position:absolute;z-index:60;top:calc(100% + 12px);right:0;width:max-content;max-width:min(340px,calc(100vw - 32px));
  padding:6px;background:rgba(17,40,32,.97);border:1px solid rgba(216,211,199,.16);border-radius:var(--glass-radius-panel);
  box-shadow:0 18px 44px -12px rgba(12,29,23,.6),inset 0 1px 0 rgba(243,239,229,.12);
  text-align:left;white-space:normal}
.nav-tools-menu[hidden]{display:none}
.nav-tools-menu:not([hidden]){animation:toolsIn .18s cubic-bezier(.2,.7,.2,1)}
@keyframes toolsIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.header-glass .nav .nav-tools-menu a{display:block;padding:12px 14px;border-radius:var(--glass-radius-control);
  color:var(--cream);text-decoration:none;white-space:normal;transition:background-color .15s ease}
.header-glass .nav .nav-tools-menu a:hover,.header-glass .nav .nav-tools-menu a:focus-visible{background:rgba(159,199,232,.12);outline:none}
.header-glass .nav .nav-tools-menu a[aria-current="page"]{background:rgba(159,199,232,.10)}
.nav-tools-menu b{display:block;font-size:14.5px;font-weight:600;line-height:1.3}
.nav-tools-menu span{display:block;margin-top:3px;font-size:13px;line-height:1.4;color:var(--sand)}

/* on cream */
.header-glass.on-cream .nav-tools-btn{color:var(--ink);border-color:rgba(41,45,43,.4)}
.header-glass.on-cream .nav-tools-btn:hover,.header-glass.on-cream .nav-tools-btn[aria-expanded="true"]{background:rgba(159,199,232,.3);border-color:var(--ink)}
.header-glass.on-cream .nav-tools::before{background:rgba(41,45,43,.14)}
.header-glass.on-cream .nav-tools-menu{background:rgba(246,243,236,.98);border-color:rgba(41,45,43,.12)}
.header-glass.on-cream .nav .nav-tools-menu a{color:var(--ink)}
.header-glass.on-cream .nav-tools-menu span{color:var(--warm-grey)}
.header-glass.on-cream .nav .nav-tools-menu a:hover{background:rgba(159,199,232,.25)}

@media (prefers-reduced-motion:reduce){.nav-tools-menu:not([hidden]){animation:none}.nav-tools-btn::after{transition:none}}
/* the bar's inner width stops at 1265px; the links and Tools fit
   beside the mark only with 18px between them */
@media (min-width:1241px){.header-glass .nav{gap:18px}}
/* phone: the nav row clips (for its auto-hide) — let the menu out while
   it is open; and no hairline, since Tools may start a line of its own */
@media (max-width:820px){
  .site-header.tools-open .nav{overflow:visible;max-height:none}
  /* here the menu spans the nav row instead of hanging from the button */
  .header-glass .nav{position:relative}
  .header-glass .nav-tools{position:static}
  .nav-tools-menu{left:0;right:0;width:auto;max-width:none;top:calc(100% + 8px)}
}
@media (max-width:640px){
  .header-glass .nav-tools{margin-left:0}
  .header-glass .nav-tools::before{display:none}
  .nav-tools-btn{padding:3px 10px}
}

/* ==================================================================
   PHONES (≤820px)
   Everything below is scoped to phone widths; the desktop layout
   does not change.
   ================================================================== */

/* ---- The Menu button and its panel (both made by glass.js) -------
   The bar shrinks to the mark and one button, about 60px instead of
   ~155px of mark plus two rows of links. */
.nav-menu-btn{display:none}
.nav .nav-lang{display:none}
@media (max-width:1100px){
  .site-header.has-menu .header-inner{flex-wrap:nowrap;gap:12px}
  .site-header.has-menu .header-right .lang{display:none}
  .site-header.has-menu .nav-menu-btn{
    display:inline-flex;align-items:center;gap:10px;min-height:44px;margin:-4px -8px -4px 0;padding:0 8px 0 10px;
    font:inherit;font-size:14px;font-weight:500;letter-spacing:.02em;color:var(--cream);
    background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  .nav-menu-icon{position:relative;display:block;width:18px;height:10px}
  .nav-menu-icon::before,.nav-menu-icon::after{content:"";position:absolute;left:0;right:0;height:1.5px;
    background:currentColor;transition:transform .2s ease}
  .nav-menu-icon::before{top:0}
  .nav-menu-icon::after{bottom:0}
  .nav-menu-btn[aria-expanded="true"] .nav-menu-icon::before{transform:translateY(4.25px) rotate(45deg)}
  .nav-menu-btn[aria-expanded="true"] .nav-menu-icon::after{transform:translateY(-4.25px) rotate(-45deg)}
  .nav-menu-btn:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
  .header-glass.on-cream .nav-menu-btn{color:var(--ink)}

  /* The panel hangs under the bar. Solid: inside the bar's own blur
     it cannot blur the page, and at this size the headline showed
     through anything less. Out of the flow, so opening it never
     pushes the page down. */
  .site-header.has-menu .header-glass .nav{
    position:absolute;z-index:60;top:calc(100% + 8px);left:0;right:0;
    display:none;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:0;
    max-height:calc(100svh - 110px);overflow:auto;opacity:1;
    margin:0;padding:6px 20px 20px;
    border:1px solid rgba(216,211,199,.16);border-radius:var(--glass-radius-panel);
    background:#112820;
    box-shadow:0 18px 44px -12px rgba(12,29,23,.6),inset 0 1px 0 rgba(243,239,229,.12);
    font-size:17px;text-align:left;
  }
  .site-header.has-menu.menu-open .header-glass .nav{display:flex;animation:toolsIn .18s cubic-bezier(.2,.7,.2,1)}
  .site-header.has-menu .header-glass .nav > a{padding:14px 0;border-bottom:1px solid var(--hairline-on-green,rgba(216,211,199,.14));color:var(--cream)}
  /* Tools: in the panel its entries stand open as links of their own,
     one tap away instead of behind a second button */
  .site-header.has-menu .header-glass .nav-tools{display:block;margin:0}
  .site-header.has-menu .header-glass .nav-tools::before{display:none}
  .site-header.has-menu .nav-tools-btn{display:none}
  .site-header.has-menu .nav-tools-menu,
  .site-header.has-menu .nav-tools-menu[hidden]{display:block;position:static;width:auto;max-width:none;
    margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;animation:none}
  .site-header.has-menu .header-glass .nav .nav-tools-menu a{padding:14px 0;border-radius:0;
    border-bottom:1px solid var(--hairline-on-green,rgba(216,211,199,.14))}
  .site-header.has-menu .header-glass .nav .nav-tools-menu a:hover{background:none}
  .site-header.has-menu .nav-tools-menu b{font-size:17px;font-weight:500;color:#9FC7E8}
  .site-header.has-menu .nav-tools-menu span{font-size:13.5px}

  /* the way to talk, at the foot of the panel */
  .site-header.has-menu .nav .nav-cta{display:flex;flex-direction:column;gap:12px;margin-top:20px}
  .site-header.has-menu .nav .nav-cta .nav-cta-talk{display:flex;align-items:center;justify-content:center;min-height:50px;
    background:var(--cream,#F3EFE5);color:var(--green,#112820);font-weight:600;font-size:16px;letter-spacing:.01em}
  .site-header.has-menu .nav .nav-cta .nav-cta-talk::after{content:" \2192";white-space:pre}
  .nav-cta-lines{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .site-header.has-menu .nav .nav-cta-lines a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;
    border:1px solid rgba(216,211,199,.3);color:var(--cream,#F3EFE5);font-size:14.5px}
  .site-header.has-menu .nav .nav-lang{display:flex;margin-top:22px;font-size:14px}
  .site-header.has-menu .header-glass.on-cream .nav{background:#F6F3EC;border-color:rgba(41,45,43,.12)}
  .site-header.has-menu .header-glass.on-cream .nav > a,
  .site-header.has-menu .header-glass.on-cream .nav .nav-tools-menu a{color:var(--ink);border-bottom-color:var(--hairline-on-cream)}
  .site-header.has-menu .header-glass.on-cream .nav-tools-menu b{color:var(--ink)}
  .site-header.has-menu .header-glass.on-cream .nav .nav-cta .nav-cta-talk{background:var(--green,#112820);color:var(--cream,#F3EFE5)}
  .site-header.has-menu .header-glass.on-cream .nav .nav-cta-lines a{color:var(--ink);border-color:rgba(41,45,43,.25)}

}
/* tablets: the panel hangs from the Menu button at a readable width,
   and the call to action stays in the bar beside it */
@media (min-width:821px) and (max-width:1100px){
  .site-header.has-menu .header-glass .nav{left:auto;width:min(440px,100%)}
  .site-header.has-menu .header-right{gap:14px}
  .site-header.has-menu .nav-menu-btn{margin-left:4px}
}
@media (max-width:820px){
  /* the slimmer bar needs less clearance above the headline and anchors */
  .hero-photo .hero-grid{padding-top:128px}
  .hero-photo section[id]{scroll-margin-top:96px}

  /* the photograph no longer drifts here (parallax.js) */
  .hero-photo .hero-bg{will-change:auto}
}
/* on the narrowest phones the button keeps its icon only */
@media (max-width:359px){
  .site-header.has-menu .nav-menu-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}

/* ---- "What we do" on a phone: one domain per line ---------------- */
@media (max-width:640px){
  .hero-tags{grid-template-columns:1fr;gap:26px;padding:20px 18px 24px}
  .tags-title{margin-bottom:0}
}

/* the menu's call to action exists only inside the phone panel */
.nav .nav-cta{display:none}

/* ---- The phone action bar (made by glass.js) ----------------------
   Let's talk, and WhatsApp, at the foot of the screen. It slides in
   once the first screen has gone and out again wherever it would
   repeat or cover something; glass.js decides which. Solid enough to
   read over green, cream and photography alike. */
.cta-bar{display:none}
@media (max-width:820px){
  .cta-bar{
    position:fixed;z-index:45;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));
    display:flex;gap:8px;padding:6px;
    background:rgba(17,40,32,.94);
    -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
    border:1px solid rgba(216,211,199,.18);border-radius:var(--glass-radius-panel,4px);
    box-shadow:0 14px 36px -12px rgba(12,29,23,.55),inset 0 1px 0 rgba(243,239,229,.12);
    transform:translateY(calc(100% + 30px));visibility:hidden;
    transition:transform .28s cubic-bezier(.22,.61,.36,1),visibility 0s linear .28s;
  }
  .cta-bar.is-on{transform:none;visibility:visible;transition:transform .28s cubic-bezier(.22,.61,.36,1),visibility 0s}
  .cta-bar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;
    font-family:"Manrope",system-ui,-apple-system,sans-serif;font-size:15.5px;font-weight:600;letter-spacing:.01em;
    text-decoration:none;-webkit-tap-highlight-color:transparent}
  .cta-bar-talk{flex:1 1 auto;background:#F3EFE5;color:#112820}
  .cta-bar-talk::after{content:" \2192";white-space:pre}
  .cta-bar-wa{flex:0 0 auto;padding:0 16px;color:#F3EFE5;border:1px solid rgba(216,211,199,.3)}
  .cta-bar a:focus-visible{outline:2px solid #9FC7E8;outline-offset:2px}
}
@media (max-width:820px) and (prefers-reduced-motion:reduce){
  .cta-bar,.cta-bar.is-on{transition:none}
}
.wa-icon{flex:none;display:block}

/* ---- Our Services: the domain menu (markup in every page's nav) ----
   A button in the bar opens a panel the width of the bar: the four
   domains, each with its services, and a featured card. Near-solid,
   like the Tools menu, since it sits inside the bar's own blur. */
.header-glass .nav-svc{display:inline-flex;align-items:flex-start}
.nav-svc-btn{display:inline-flex;align-items:center;gap:8px;font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;white-space:nowrap}
.nav-svc-btn::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}
.nav-svc-btn[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
.header-glass .nav-svc-btn:hover,.header-glass .nav-svc-btn[aria-expanded="true"],.header-glass .nav-svc-btn.is-current{color:var(--cream,#F3EFE5)}
.header-glass.on-cream .nav-svc-btn{color:var(--warm-grey,#72786F)}
.header-glass.on-cream .nav-svc-btn:hover,.header-glass.on-cream .nav-svc-btn[aria-expanded="true"],.header-glass.on-cream .nav-svc-btn.is-current{color:var(--ink,#292D2B)}
.nav-svc-btn.is-current{text-decoration:underline;text-decoration-color:#9FC7E8;text-underline-offset:6px;text-decoration-thickness:1.5px}
.nav-svc-btn:focus-visible{outline:2px solid #9FC7E8;outline-offset:4px}

.svc-menu{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 10px);
  display:grid;grid-template-columns:minmax(0,1fr);
  max-height:calc(100vh - 130px);overflow:auto;padding:28px;
  background:#112820;border:1px solid rgba(216,211,199,.16);border-radius:var(--glass-radius-panel,4px);
  box-shadow:0 24px 60px -18px rgba(12,29,23,.65),inset 0 1px 0 rgba(243,239,229,.12);
  text-align:left;white-space:normal;cursor:auto;font-size:15px;line-height:1.4;letter-spacing:0}
.svc-menu[hidden]{display:none}
.svc-menu:not([hidden]){animation:toolsIn .18s cubic-bezier(.2,.7,.2,1)}
.svc-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 26px}
/* each column shares two rows with its neighbours (subgrid): however long
   a domain's description, every list of services starts on one line */
.svc-col{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0;align-content:start}
.header-glass .nav .svc-menu a{white-space:normal;text-decoration:none}
.header-glass .nav .svc-head{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:0 12px;
  align-content:start;padding:0 0 16px;margin:0 0 12px;border-bottom:1px solid rgba(216,211,199,.14);color:#F3EFE5}
.svc-ic{display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(216,211,199,.2);border-radius:3px;background:rgba(243,239,229,.04)}
.svc-ic svg{width:20px;height:20px;fill:none;stroke:#9FC7E8;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.svc-t{font-weight:600;font-size:16px;line-height:1.25}
.svc-d{grid-column:1 / -1;margin-top:12px;font-size:13.5px;line-height:1.45;color:#D8D3C7}
.header-glass .nav .svc-head:hover .svc-t{color:#9FC7E8}
.svc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.header-glass .nav .svc-list a{display:block;margin:0 -10px;padding:8px 10px;border-radius:3px;color:#F3EFE5;transition:background-color .15s ease}
.header-glass .nav .svc-list a:hover,.header-glass .nav .svc-list a:focus-visible{background:rgba(159,199,232,.12);outline:none}
.svc-list b{display:block;font-weight:500;font-size:14.5px;line-height:1.3}
.svc-list span{display:block;margin-top:2px;font-size:12.5px;line-height:1.4;color:#B5B1A6}
.svc-foot{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;
  margin-top:22px;padding-top:20px;border-top:1px solid rgba(216,211,199,.14)}
.header-glass .nav .svc-foot-link{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 12px;font-size:15px;color:#D8D3C7}
.svc-foot-k{padding:5px 10px;border-radius:999px;background:rgba(243,239,229,.1);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:#F3EFE5}
.svc-foot-link b{font-weight:600;color:#9FC7E8}
.svc-foot-link b::after{content:" \2197"}
.header-glass .nav .svc-foot-link:hover b{text-decoration:underline;text-underline-offset:4px}
.header-glass .nav .svc-feature-cta{display:flex;align-items:center;justify-content:center;min-height:48px;
  padding:0 28px;background:#F3EFE5;color:#112820;font-weight:600;font-size:15px}
.svc-feature-cta::after{content:" \2192";white-space:pre}
.header-glass .nav .svc-feature-cta:hover{background:#fff}
@media (max-width:1180px) and (min-width:821px){
  .svc-menu{grid-template-columns:1fr}
  .svc-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 30px}
}
@media (prefers-reduced-motion:reduce){.svc-menu:not([hidden]){animation:none}}

/* phones: inside the Menu panel the four domains stand open as links */
@media (max-width:1100px){
  .site-header.has-menu .header-glass .nav-svc{display:block}
  .site-header.has-menu .nav-svc-btn{display:none}
  .site-header.has-menu .svc-menu,
  .site-header.has-menu .svc-menu[hidden]{display:block;position:static;max-height:none;overflow:visible;padding:0;margin:0;
    background:none;border:0;border-radius:0;box-shadow:none;animation:none}
  .site-header.has-menu .svc-cols{display:block;padding:0;border:0}
  .site-header.has-menu .svc-list,.site-header.has-menu .svc-foot,.site-header.has-menu .svc-ic{display:none}
  .site-header.has-menu .nav-svc::before{content:"Our services";display:block;padding:16px 0 4px;
    font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#9FC7E8}
  .site-header.has-menu .header-glass .nav .svc-head{display:block;padding:12px 0;margin:0;
    border-bottom:1px solid var(--hairline-on-green,rgba(216,211,199,.14))}
  .site-header.has-menu .svc-t{display:block;font-size:17px;font-weight:400}
  .site-header.has-menu .svc-d{display:block;margin-top:3px;font-size:13px;color:#B5B1A6}
  .site-header.has-menu .header-glass.on-cream .nav .svc-head{color:var(--ink);border-bottom-color:var(--hairline-on-cream,#D8D3C7)}
  .site-header.has-menu .header-glass.on-cream .svc-d{color:var(--warm-grey,#72786F)}
  .site-header.has-menu .header-glass.on-cream .nav-svc::before{color:#5E8FB8}
}

/* ---- The home hero on phones and tablets ----------------------------
   As on the other pages: the photograph as a banner at the top, framed
   on the figure at the window, and the words below it on green. Filling
   the whole (long) hero it was enlarged past recognition, and the figure
   fell outside the frame. Upright tablets too: at 834–1100px wide
   and far taller than wide, "cover" showed a strip of sky and sea,
   with the figure cropped out on the right. */
@media (max-width:820px),(max-width:1100px) and (orientation:portrait){
  .hero-photo .hero{--hp:clamp(300px,80vw,480px);min-height:0}
  .hero-photo .hero-bg{top:0;bottom:auto;height:var(--hp);background-position:92% 42%;transform:none}
  .hero-photo .hero::after{background:linear-gradient(180deg,
    rgba(12,29,23,.45) 0,rgba(12,29,23,0) calc(var(--hp) * .28),rgba(12,29,23,0) calc(var(--hp) * .62),var(--green) var(--hp),var(--green) 100%)}
  .hero-photo .hero-grid{padding-top:calc(var(--hp) - 14px);padding-bottom:clamp(44px,8vw,72px)}
}
@media (min-width:821px) and (max-width:1100px) and (orientation:portrait){
  .hero-photo .hero{--hp:clamp(480px,64vw,700px)}
  .hero-photo .hero-grid{padding-top:calc(var(--hp) - 24px);padding-bottom:clamp(56px,8vw,88px)}
  .hero-photo .hero-slogan{margin-top:0}
  .hero-photo .hero-copy{max-width:560px}
}