/* ==========================================================================
   Penrose Advisory
   Design system — No. 01 "The Mayfair"
   Approved 2026-07: EB Garamond wordmark, ink navy + chalk.
   Racing green is retired (client's former employer uses the same green).
   ========================================================================== */

:root{
  /* --- palette ------------------------------------------------------- */
  --navy:#24405C;          /* Harbour Blue  — primary dark (Sep 2026) */
  --navy-deep:#1B334A;     /* deeper harbour— gradients, footers      */
  --chalk:#F6F3ED;         /* Chalk         — primary light           */
  --white:#FFFFFF;
  --brass:#9A7B4F;         /* Brass         — accent, used sparingly  */
  --brass-lt:#D2B47C;      /* Brass on dark — warmed to suit           */
  --stone:#8C8880;         /* Portland Stone — secondary text          */
  /* Text-only shades of Brass and Stone. The base tones measure 3.2–3.9:1
     on Chalk, under WCAG AA's 4.5:1 for small text; these keep the hue and
     reach 4.6:1. Hairlines, rules and focus rings keep the base tones. */
  --brass-text:#846944;
  --stone-text:#716D66;
  --line:#DDD8CE;          /* hairlines on light                       */
  --line-dk:rgba(255,255,255,.16);
  --cream:#F4F1EA;         /* text on dark                             */
  --muted-dk:#BBC8D5;      /* secondary text on dark                   */

  /* --- type ---------------------------------------------------------- */
  --serif:'EB Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Questrial', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- rhythm -------------------------------------------------------- */
  --gutter:clamp(24px, 5vw, 76px);
  --section-y:clamp(76px, 11vh, 132px);
  --measure:62ch;
}

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

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;}
}

body{
  background:var(--chalk);
  color:var(--navy);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,svg{display:block;max-width:100%;}
a{color:inherit;}

/* width:100% is belt-and-braces: .wrap is a flex child of the column-flex
   .hero, and explicit width keeps it independent of how auto margins and
   align-items interact there. */
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--gutter);}

/* skip link — keyboard users land here first */
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:var(--cream);
  padding:12px 20px;z-index:200;font-size:12px;letter-spacing:.2em;text-transform:uppercase;}
.skip:focus{left:0;}

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

/* ==========================================================================
   Wordmark
   ========================================================================== */
.wordmark{font-family:var(--serif);font-weight:500;letter-spacing:.3em;
  text-indent:.3em;line-height:1;text-decoration:none;display:inline-block;
  text-align:center;}
/* ADVISORY is centered under PENROSE (client, Sep 2026) — a return to the
   approved slide-4 lockup. Each line's text-indent equals its letter-spacing,
   which balances the trailing space letter-spacing leaves after the last
   glyph, so plain text-align:center lands the ink centered: measured at 64px,
   ADVISORY's ink centre sits 0.5px from PENROSE's. This replaces the earlier
   left-aligned version and the optical padding nudge it needed. */
.wordmark .sub{display:block;font-family:var(--sans);font-size:.42em;
  letter-spacing:.62em;text-indent:.62em;color:var(--brass);margin-top:.5em;}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{position:absolute;inset:0 0 auto 0;z-index:20;padding-block:26px;}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.site-header .wordmark{font-size:19px;color:var(--cream);}
.site-header .wordmark .sub{color:var(--brass-lt);}

.nav{display:flex;gap:36px;}
.nav a{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#C9C3B6;
  text-decoration:none;padding-block:6px;position:relative;transition:color .25s ease;}
.nav a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--brass-lt);transition:right .3s ease;}
.nav a:hover{color:var(--cream);}
.nav a:hover::after{right:0;}

.nav-toggle{display:none;background:none;border:1px solid var(--line-dk);color:var(--cream);
  font-family:var(--sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  padding:10px 16px;cursor:pointer;}

/* ==========================================================================
   Hero
   ========================================================================== */
/* Two rows: the content block centres in the space that's left, the city list
   sits on the baseline. padding-top reserves room for the absolutely
   positioned header so "centered" is centered within the visible area, not
   behind the nav. (An auto margin on the cities row would swallow all the
   free space and silently defeat any centring here.) */
.hero{--hero-image:url('hero.jpg');--hero-pos:center 30%;
  position:relative;min-height:clamp(560px,92vh,880px);
  display:grid;grid-template-rows:1fr auto;padding-top:94px;
  color:var(--cream);isolation:isolate;overflow:hidden;}
.hero::before{content:'';position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(rgba(18,32,48,.82), rgba(20,36,54,.62) 45%, rgba(16,30,46,.90)),
    var(--hero-image, none) var(--hero-pos)/cover no-repeat,
    linear-gradient(160deg,#284A68,#16304A);}
/* subtle grain so the large flat areas don't band on cheap screens */
.hero::after{content:'';position:absolute;inset:0;z-index:-1;opacity:.035;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");}

.hero-inner{align-self:center;}
.eyebrow{font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--brass-lt);
  margin-bottom:26px;}
/* 22ch breaks the headline into two even lines (~604 / 538px at 1440) and keeps
   it wider than the lede beneath — below ~20ch it drops to four lines with a
   stubby last one and ends up narrower than its own supporting copy. */
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,5.4vw,58px);
  line-height:1.14;max-width:22ch;letter-spacing:.005em;text-wrap:balance;}
/* the lede sits under a 16ch headline — much below ~56ch and the block reads
   pinched against it, and the rag breaks badly */
.hero .lede{margin-top:26px;max-width:58ch;font-size:clamp(14px,1.15vw,15.5px);
  line-height:1.85;color:#C9C3B6;text-wrap:pretty;}

.btn{display:inline-block;margin-top:38px;border:1px solid var(--brass-lt);color:#E9DEC8;
  padding:15px 38px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  text-decoration:none;transition:background .3s ease,color .3s ease;}
.btn:hover{background:var(--brass-lt);color:var(--navy);}

.hero-cities{padding-block:0 42px;display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,62px);
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#A3ACB7;}

/* ==========================================================================
   Sections
   ========================================================================== */
.section{padding-block:var(--section-y);}
.section--light{background:var(--chalk);}
.section--white{background:var(--white);}
.section--navy{background:linear-gradient(170deg,#26435F 0%,#24405C 45%,#1F3852 100%);
  color:var(--cream);}

.sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:14px;}
.sec-num{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--brass-text);}
.sec-label{font-size:11px;letter-spacing:.3em;text-transform:uppercase;}
.section--navy .sec-num{color:var(--brass-lt);}

/* 24ch lets the About heading break at its sentence ("Deep regional expertise. /
   A trusted global network.") instead of splitting mid-phrase at 20ch. The
   other three headings wrap identically either way. */
h2.display{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.4vw,40px);
  line-height:1.25;max-width:24ch;margin-bottom:26px;text-wrap:balance;}
.body-copy{max-width:var(--measure);font-size:15.5px;line-height:1.9;color:#4A4F57;
  text-wrap:pretty;}
.body-copy p + p{margin-top:19px;}
.section--navy .body-copy{color:var(--muted-dk);}

.rule{width:56px;height:1px;background:var(--brass);margin-block:30px;opacity:.8;}

/* two-column split */
.split{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(32px,6vw,88px);align-items:start;}

/* ==========================================================================
   Services
   The client supplied service names only, no descriptions — so this is set as
   a ruled list rather than cards, which would beg for body copy we'd have to
   invent. Five items also don't divide cleanly into a card grid.
   ========================================================================== */
.practices{list-style:none;margin-top:46px;border-top:1px solid var(--line);}
.practices li{display:flex;align-items:baseline;gap:clamp(18px,4vw,54px);
  padding:clamp(20px,2.6vw,30px) 2px;border-bottom:1px solid var(--line);
  transition:padding-left .35s ease;}
.practices li:hover{padding-left:12px;}
.pn{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--brass-text);
  min-width:2.2ch;flex:none;}
.pname{font-family:var(--serif);font-weight:400;font-size:clamp(19px,2.1vw,27px);
  line-height:1.3;text-wrap:balance;}

/* ==========================================================================
   Coverage map
   ========================================================================== */
.map-frame{margin-top:18px;border:1px solid rgba(255,255,255,.10);background:#182E45;
  padding:clamp(14px,2.4vw,30px);overflow-x:auto;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 20px 44px rgba(8,18,30,.30);}
.map{width:100%;height:auto;min-width:540px;}

.cty{stroke:#182E45;stroke-width:.45;vector-effect:non-scaling-stroke;
  transition:fill .3s ease;}
.cty.t1{fill:#C9A463;}                         /* specialism — rich gold  */
.cty.t2{fill:#EDE2C6;}                         /* partner   — pale yellow */
.cty.t3{fill:#35597F;}                         /* no coverage             */
.pin{stroke:#182E45;stroke-width:1;}

/* Only covered countries are interactive — tier 3 has no name or tier to show
   and shouldn't invite a hover that says "no". */
.cty[data-n],.pin[data-n]{cursor:pointer;}
.cty[data-n]:hover{stroke:var(--cream);stroke-width:1.1;}
.pin[data-n]:hover{stroke:var(--cream);stroke-width:2;}

/* Tooltip. position:fixed keeps it clear of the map's overflow-x container,
   which would otherwise clip it at the panel edge. */
.map-tip{position:fixed;z-index:60;pointer-events:none;opacity:0;
  transform:translateY(3px);transition:opacity .14s ease,transform .14s ease;
  background:#0F2135;border:1px solid rgba(255,255,255,.16);
  padding:9px 13px 10px;max-width:260px;
  box-shadow:0 12px 28px rgba(6,14,24,.45);}
.map-tip.on{opacity:1;transform:none;}
.map-tip .n{font-family:var(--serif);font-size:15px;line-height:1.2;color:var(--cream);
  white-space:nowrap;}
.map-tip .t{font-size:9px;letter-spacing:.2em;text-transform:uppercase;margin-top:5px;
  white-space:nowrap;}
.map-tip .t.t1{color:#C9A463;}
.map-tip .t.t2{color:#EDE2C6;}
@media (prefers-reduced-motion:reduce){.map-tip{transition:none;}}
.pin.t1{fill:#C9A463;}
.pin.t2{fill:#EDE2C6;}

.legend{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,42px);margin:26px 0 6px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-dk);}
.legend li{display:flex;align-items:center;gap:11px;list-style:none;}
.legend .key{width:13px;height:13px;flex:none;border:1px solid rgba(255,255,255,.25);}
.legend .k1{background:#C9A463;}
.legend .k2{background:#EDE2C6;}
.legend .k3{background:#35597F;}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(36px,7vw,96px);align-items:start;}

.field{margin-bottom:24px;}
.field label{display:block;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--stone-text);margin-bottom:9px;}
.field input,.field textarea{width:100%;font-family:var(--sans);font-size:15px;color:var(--navy);
  background:var(--white);border:1px solid var(--line);padding:14px 16px;
  transition:border-color .25s ease;}
.field textarea{min-height:148px;resize:vertical;line-height:1.7;}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--brass);}

.btn-solid{background:var(--navy);color:var(--cream);border:1px solid var(--navy);
  padding:16px 42px;font-family:var(--sans);font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;cursor:pointer;transition:background .3s ease,color .3s ease;}
.btn-solid:hover{background:transparent;color:var(--navy);}

.contact-detail{font-size:14.5px;line-height:2;}
.contact-detail a{color:var(--navy);text-decoration:none;border-bottom:1px solid var(--brass);
  padding-bottom:1px;}
.contact-detail a:hover{color:var(--brass-text);}
.form-note{font-size:12px;color:var(--stone-text);margin-top:18px;line-height:1.7;}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--navy-deep);color:var(--muted-dk);padding-block:52px 40px;}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:center;}
.site-footer .wordmark{font-size:15px;color:var(--cream);}
.site-footer .wordmark .sub{color:var(--brass-lt);font-size:.44em;}
.site-footer .small{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;}
.cookie-link{background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;
  text-transform:inherit;cursor:pointer;margin-left:18px;padding:0;
  border-bottom:1px solid rgba(210,180,124,.4);}
.cookie-link:hover{color:var(--cream);}

/* ==========================================================================
   Cookie consent — a small card in the corner, not a bar across the page.
   Accept and Decline carry equal weight: declining must be as easy as
   accepting, so neither is styled as the "primary" choice.
   ========================================================================== */
.consent{position:fixed;left:24px;bottom:24px;z-index:70;max-width:340px;
  background:#0F2135;color:var(--muted-dk);border:1px solid var(--line-dk);
  border-top:1px solid var(--brass-lt);padding:18px 20px 16px;
  box-shadow:0 12px 28px rgba(6,14,24,.35);
  opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease;}
.consent.on{opacity:1;transform:none;}
.consent p{font-size:12.5px;line-height:1.65;}
.consent-actions{display:flex;gap:10px;margin-top:14px;}
.consent-actions button{flex:1;background:transparent;color:var(--cream);
  border:1px solid rgba(210,180,124,.55);padding:9px 14px;font-family:var(--sans);
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;cursor:pointer;
  transition:background .2s ease,color .2s ease;}
.consent-actions button:hover{background:var(--brass-lt);color:var(--navy);}

/* ==========================================================================
   Entrance — one orchestrated reveal, not scattered micro-motion
   ========================================================================== */
.rise{opacity:0;transform:translateY(16px);
  animation:rise .9s cubic-bezier(.2,.7,.3,1) forwards;}
.rise:nth-child(1){animation-delay:.05s}
.rise:nth-child(2){animation-delay:.16s}
.rise:nth-child(3){animation-delay:.27s}
.rise:nth-child(4){animation-delay:.38s}
@keyframes rise{to{opacity:1;transform:none;}}

/* reveal-on-scroll for sections below the fold */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease;}
.reveal.in{opacity:1;transform:none;}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:900px){
  .split,.contact-grid{grid-template-columns:1fr;}
  h2.display{max-width:none;}

  /* The photograph puts the city and river left, the balcony right. A centred
     crop on a narrow screen lands squarely on that curve, which reads as an
     odd dark arch. Shift the focal point onto the skyline instead. The
     balcony stays on wider screens, where it frames the shot. */
  .hero{--hero-pos:15% 35%;}
}

@media (max-width:720px){
  .nav{position:fixed;inset:0;background:var(--navy);flex-direction:column;
    justify-content:center;align-items:center;gap:30px;transform:translateX(100%);
    transition:transform .4s cubic-bezier(.4,0,.2,1);z-index:50;}
  .nav.open{transform:none;}
  .nav a{font-size:14px;letter-spacing:.28em;}
  .nav-toggle{display:block;position:relative;z-index:60;}
  .hero{padding-top:104px;}
  .hero-cities{gap:18px;font-size:9.5px;}

  /* Let the map fit the screen rather than scroll. At min-width:540px a phone
     opens on the Americas with Asia — the entire point of the map — off to
     the right until the reader thinks to swipe. Countries get small, but the
     gold cluster still reads at a glance, and that is the job. Hover doesn't
     exist on touch anyway, so no detail is lost. */
  .map{min-width:0;}
  .map-frame{padding:10px;}
  .site-header .wordmark{font-size:16px;}
  .consent{left:16px;right:16px;bottom:16px;max-width:none;}
}

/* ==========================================================================
   Print
   ========================================================================== */
@media print{
  .site-header,.btn,.nav-toggle,form,.consent,.cookie-link{display:none;}
  .hero,.section--navy{background:#fff !important;color:#000 !important;}
  .hero::before,.hero::after{display:none;}
}