/* ==========================================================================
   Westmar Surveys — stylesheet
   Hand-edit this file. build.py copies it to site/assets/site.css unchanged.

   Design notes
   - MONOCHROME. The brand is black line art; there is no brand colour. Do not
     reintroduce one. The only colour on the site is the amber of the review
     stars, which is a convention readers expect.
   - ONE TYPEFACE: Barlow. No second face for display — mixing reads as generic.
   - Type is fluid: clamp() ties every size to the viewport so there are no
     awkward jumps between the breakpoints.
   - Spacing runs on a 4px scale (--s1..--s12). Sections use --s10/--s12.
   - Radii are small (3-4px). Soft rounded cards read as website-builder default;
     hairlines and structure read as considered.
   ========================================================================== */

/* ---------- tokens ---------- */
/* ---------- tokens ---------- */
:root{
  /* GREY, as the original site was. Not black, not navy. #444 for headings and
     body, #222 for page titles, #5d5d5d for buttons — these are the values the
     original site actually used and Thomas wants kept. No brand colour: the only
     colour on the site is the amber of the review stars. */
  --ink:#444444;          /* headings */
  --title:#222222;        /* page titles — a touch darker than headings */
  --btn:#5d5d5d;          /* buttons, in the original's grey */
  --ink-70:#5d5d5d;
  --ink-40:#8a8a8a;
  --focus:#5d5d5d;

  --body:#4a4a4a;         /* running text */
  --muted:#6f6f6f;
  --faint:#8b8b8b;

  --bg:#ffffff;
  --header:#fafafa;
  --bg-soft:#fafafa;
  --bg-band:#f2f2f2;
  --card:#f0f0f0;
  --line:#e3e3e3;
  --line-strong:#cccccc;

  /* Sampled from the printed business card (the rules and bullet separators).
     Used ONLY as thin rules, small numerals and marks — never on headings,
     body copy or buttons. Set --gold to var(--line-strong) to remove it entirely. */
  --gold:#af905a;
  --gold-soft:#d7c8ae;

  --star:#af905a;

  --sans:'Barlow',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --display:var(--sans);

  --s1:4px;  --s2:8px;   --s3:12px;  --s4:16px; --s5:24px;  --s6:32px;
  --s7:40px; --s8:56px;  --s9:72px;  --s10:96px; --s11:120px; --s12:150px;

  --wrap:1560px;
  --radius:4px;
  --radius-lg:6px;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 26px rgba(0,0,0,.06);
  --shadow-lg:0 2px 6px rgba(0,0,0,.05),0 18px 46px rgba(0,0,0,.10);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  font-size:clamp(16px,.55vw + 14.4px,17.5px);
  line-height:1.6;
  color:var(--body);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-weight:700;color:var(--ink);line-height:1.14;letter-spacing:-.01em}
p{text-wrap:pretty}
a{color:var(--ink);text-underline-offset:3px}

/* visible keyboard focus everywhere, never on mouse click */
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
:focus:not(:focus-visible){outline:none}

@media(prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;
  padding-inline:clamp(18px,3.5vw,56px)}
.narrow{max-width:86ch}
section{padding-block:clamp(56px,7vw,var(--s10))}
section.tight{padding-block:clamp(36px,4.5vw,var(--s8))}
section.band{background:var(--bg-soft);border-block:1px solid var(--line)}
.rule{border:0;border-top:1px solid var(--line);margin-block:var(--s6)}

/* skip link — first thing a screen reader or keyboard user meets */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;
  padding:12px 20px;border-radius:0 0 var(--radius) 0;text-decoration:none;font-size:14px}
.skip:focus{left:0}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(250,250,250,.95);
  backdrop-filter:saturate(1.6) blur(10px);border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease),background .3s var(--ease)}
.site-header.scrolled{box-shadow:0 1px 18px rgba(0,0,0,.08)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  min-height:128px}
.brand{display:block;flex-shrink:0;line-height:0}
.brand img{width:clamp(240px,29vw,430px)}

.nav{display:flex;align-items:center;gap:var(--s1)}
/* The horizontal nav needs ~761px and the wordmark up to ~420px. Below 1240px the
   two no longer fit side by side, so that is where the burger takes over. Measured,
   not guessed — re-measure if nav items or the logo size change. */
/* Every list in the nav, at every level. The browser's own `ul{list-style:disc}`
   applies DIRECTLY to .subnav and so beats a `list-style:none` inherited from the
   parent list — which is why the dropdowns showed bullets. Reset them explicitly. */
.nav ul,.nav ol,.subnav{list-style:none;margin:0;padding:0}
.nav li{list-style:none}
.nav-item{position:relative}
.nav-link{display:flex;align-items:center;gap:6px;padding:10px 13px;font-size:15px;
  color:var(--body);text-decoration:none;border-radius:var(--radius);white-space:nowrap;
  transition:color .18s,background .18s}
.nav-link:hover{color:var(--ink);background:var(--bg-band)}
.subnav{position:absolute;top:calc(100% - 2px);left:0;min-width:268px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  list-style:none;margin:0;padding:var(--s2);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s}
.nav-item:hover>.subnav,.nav-item:focus-within>.subnav{opacity:1;visibility:visible;transform:none}
/* Dropdowns near the right edge of the nav open to the LEFT of their trigger.
   Anchored left:0 the FAQ dropdown (min-width 268px) crossed the viewport edge
   once the longer translated labels pushed it rightwards — measured overflow at
   1280 (de) and 1440 (fr). Space to the left is always free, so right-anchor the
   last three items' menus at every width. */
.nav-item:nth-last-child(-n+3)>.subnav{left:auto;right:0}
.subnav a{display:block;padding:10px 14px;font-size:12.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--body);text-decoration:none;border-radius:var(--radius);
  transition:background .15s,color .15s}
.subnav a:hover{background:var(--bg-band);color:var(--ink)}

.nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;
  background:none;border:1px solid var(--line);border-radius:var(--radius);cursor:pointer}
.nav-toggle span{display:block;width:20px;height:1.5px;background:var(--ink);position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:20px;
  height:1.5px;background:var(--ink);transition:transform .25s var(--ease),top .25s var(--ease)}
.nav-toggle span::before{top:-6px} .nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded=true] span{background:transparent}
.nav-toggle[aria-expanded=true] span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded=true] span::after{top:0;transform:rotate(-45deg)}

@media(max-width:1240px){
  .nav-toggle{display:flex}
  /* Explicit height rather than top+bottom. Relying on the two to stretch a fixed
     panel measured only 73px tall in testing, and dvh also handles the mobile
     address bar collapsing, which vh does not. */
  .nav{position:fixed;left:0;right:0;top:var(--header-h,128px);
    height:calc(100vh - var(--header-h,128px));
    height:calc(100dvh - var(--header-h,128px));
    flex-direction:column;align-items:stretch;gap:0;background:#fff;
    border-top:1px solid var(--line);
    padding:var(--s4) clamp(18px,4vw,40px) var(--s9);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s}
  .nav.open{opacity:1;visibility:visible;transform:none;pointer-events:auto}
  /* belt and braces: never let a child stay hidden once the panel is open */
  .nav.open *{visibility:visible}
  .nav-link{padding:14px 4px;font-size:17px;border-bottom:1px solid var(--line);border-radius:0}
  .nav-link[aria-current]::before{display:none}
  .subnav{position:static;opacity:1;visibility:visible;transform:none;border:0;box-shadow:none;
    padding:var(--s2) 0 var(--s4) var(--s4);min-width:0;display:block}
  .subnav a{padding:9px 0;font-size:12px}
}

/* ---------- language switcher ---------- */
/* EN · ES · FR · DE, sitting at the end of the header row on desktop and beside
   the burger on mobile. Deliberately quiet: this is wayfinding, not a feature.
   The current language is marked with the gold hairline used elsewhere for the
   eyebrow rule — a mark, never a heading colour. */
.u-sr{position:absolute;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}
/* Lives INSIDE the nav (Thomas, 2026-08-28): last item of the header row on
   desktop, last block of the slide-down panel on mobile, and repeated in the
   footer-bottom bar. It must not widen the row past the burger breakpoint — the
   row budget is measured, see the band note below. */
.langsw{display:flex;align-items:center;gap:2px;flex-shrink:0;
  margin-left:var(--s3);padding-left:var(--s3);border-left:1px solid var(--line)}
.langsw a{display:block;padding:6px 6px 4px;font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none;
  border-bottom:2px solid transparent;transition:color .18s,border-color .18s}
.langsw a:hover{color:var(--ink);border-bottom-color:var(--line-strong)}
.langsw a[aria-current]{color:var(--ink);border-bottom-color:var(--gold)}

/* In the mobile nav panel: a full-width block under the links, bigger targets. */
@media(max-width:1240px){
  .nav .langsw{margin:var(--s5) 0 0;padding:var(--s4) 0 0;border-left:0;
    border-top:1px solid var(--line);gap:var(--s2)}
  .nav .langsw a{font-size:13px;padding:10px 12px}
}

/* In the footer bottom bar: same quiet style, no divider. */
.site-footer .langsw{margin-left:0;padding-left:0;border-left:0}
.site-footer .langsw a{color:var(--faint)}
.site-footer .langsw a:hover{color:var(--ink)}
.site-footer .langsw a[aria-current]{color:var(--body)}

/* Spanish and French nav labels run ~20 characters longer than the English —
   "representación del armador" against "Owner Representation" — and with the
   switcher now in the row every language needs a step of compression in the
   band just above the 1240px burger breakpoint. Values measured with the
   header probe (see HANDOVER §7): the row must fit at 1241px per language. */
html[lang=es] .nav-link,html[lang=fr] .nav-link{font-size:14px;padding:10px 8px}
@media(min-width:1241px) and (max-width:1450px){
  .nav-link{font-size:14px;padding:10px 7px}
  .langsw{margin-left:var(--s2);padding-left:var(--s2)}
  .langsw a{padding:6px 4px;letter-spacing:.1em}
  html[lang=es] .nav-link,html[lang=fr] .nav-link{font-size:13px;padding:10px 5px}
}
@media(max-width:1240px){
  html[lang=es] .nav-link,html[lang=fr] .nav-link{font-size:17px;padding:14px 4px}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:12.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  text-decoration:none;border:1px solid var(--btn);border-radius:var(--radius);
  padding:13px 22px;cursor:pointer;line-height:1;white-space:nowrap;
  transition:transform .18s var(--ease),background .18s,color .18s,box-shadow .18s,border-color .18s}
.btn .arrow{transition:transform .22s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.btn:active{transform:translateY(1px)}
.btn--solid{background:var(--btn);color:#fff}
.btn--solid:hover{background:#4a4a4a;box-shadow:0 6px 18px rgba(17,17,17,.20)}
.btn--outline{background:#fff;color:var(--btn)}
.btn--outline:hover{background:var(--btn);color:#fff}
.btn--ghost{background:#fff;color:var(--btn);border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--btn);box-shadow:var(--shadow)}
.btn--wa{gap:10px}
.btn--wa svg{width:17px;height:17px;flex:none}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3)}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;display:flex;align-items:center;
  min-height:clamp(430px,58vh,600px);overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:-2}
/* 32% keeps the travel-lift gantry and the boat's superstructure in frame.
   At 78% the crop sat on the quayside and threw the subject away. */
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 32%}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.88) 38%,
             rgba(255,255,255,.55) 66%,rgba(255,255,255,.28) 100%)}
.hero__inner{padding-block:clamp(48px,6vw,80px)}
.hero .eyebrow{margin-bottom:0}
.hero h1{font-size:clamp(27px,3.4vw,44px);max-width:26ch;letter-spacing:.005em;
  text-transform:uppercase;line-height:1.1}
.hero__sub{margin-top:var(--s4);font-size:clamp(15px,1.25vw,19px);color:var(--body);
  max-width:64ch;text-transform:uppercase;letter-spacing:.02em;line-height:1.4}
.hero .btn-row{margin-top:var(--s6);flex-direction:column;align-items:flex-start;
  gap:var(--s3)}
@media(max-width:640px){
  .hero::after{background:linear-gradient(175deg,rgba(255,255,255,.94),rgba(255,255,255,.9))}
  .hero h1{max-width:none}
}

/* page banner (fees / faq / contact) */
/* Banner boxes were ~4.4:1 while the source photographs are 16:9 or 21:9, so
   object-fit was cropping most of the subject away. Taller box, and each banner
   sets its own object-position where the subject is not dead centre. */
.banner{position:relative;height:clamp(220px,31vw,460px);overflow:hidden;
  background:var(--bg-band)}
.banner img{width:100%;height:100%;object-fit:cover;object-position:center}

/* page head */
.page-head{max-width:none}

/* The intro sits in ONE column beneath the title.
   Two earlier attempts were wrong and are worth recording so they are not retried:
     - title left / intro right  -> the text read as floating oddly on the right
     - intro split into two columns -> sequential paragraphs became side by side,
       so you read down the left then jumped back up to the right, and an odd
       number of paragraphs left a hole in the grid.
   Instead the intro is set larger, at a generous but still readable measure. The
   whitespace to its right is deliberate, and reads as composition rather than as
   something unfinished because the type has enough weight to hold the space. */
/* No max-width. Each intro line is written to fit the container on one line at
   desktop width, and wraps naturally on narrower screens. The size is tuned so the
   longest line still fits — see the note above FEES_LEDE in content.py. */
.page-head__body{margin-top:var(--s5);max-width:none}
.page-head__body .lede{max-width:none;margin-top:0;
  font-size:clamp(16px,1.32vw,19px);line-height:1.6;text-wrap:normal}
.page-head__body .lede + .lede{margin-top:var(--s3)}

.eyebrow{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--faint);display:block;margin-bottom:0}
/* The rule sits exactly halfway between the label and the heading below it.
   Equal margins above and below, and the heading's own top margin is removed when
   it follows an eyebrow — otherwise the gap below is larger and the rule rides high. */
.eyebrow::after{content:"";display:block;width:32px;height:2px;background:var(--gold);
  margin-block:13px}
/* Whatever follows an eyebrow — a heading, a list, a grid — starts flush, so the
   gap below the rule always equals the gap above it. Listing individual heading
   selectors missed "The approach" on /about-us/, which is followed by a <div>. */
/* Doubled class for specificity: a plain `.eyebrow + *` ties with rules like
   `.steps{margin-top:...}` defined later in the file, and loses on source order. */
.eyebrow.eyebrow + *{margin-top:0}
/* The rule follows the label's alignment. Left-aligned it starts at the left edge;
   centred it is centred under the label. Left at a fixed left offset inside a
   centred block it reads as a stray mark, which is the bug this fixes. */
.page-head--center{text-align:center}
.page-head--center .eyebrow::after,
.git__head .eyebrow::after{margin-inline:auto}
h1.page-title{font-size:clamp(27px,3.2vw,40px);letter-spacing:.02em;margin-top:var(--s3);
  text-transform:uppercase;color:var(--title);line-height:1.12}
h2.section-title{font-size:clamp(21px,2.1vw,29px);margin-bottom:var(--s5);
  text-transform:uppercase;letter-spacing:.02em;color:var(--title)}

/* pull-quote style statement */
.statement{font-size:clamp(20px,2.1vw,27px);font-weight:600;line-height:1.34;color:var(--ink);
  max-width:46ch;position:relative;padding-left:var(--s6)}
.statement::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;
  background:var(--gold);border-radius:3px}
.statement.wide{max-width:52ch}

/* strapline row */
.strap{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);flex-wrap:wrap}
.strap p{font-size:clamp(16px,1.3vw,19px);font-weight:600;color:var(--ink);max-width:40ch}

/* ---------- cards / grids ---------- */
.grid{display:grid;gap:clamp(24px,3vw,var(--s7))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(276px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(224px,1fr))}
.grid--gallery{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--s4)}

.card{display:flex;flex-direction:column}
.card__media{overflow:hidden;border-radius:var(--radius-lg);margin-bottom:var(--s5);
  background:var(--bg-band)}
.card__media img{width:100%;aspect-ratio:1/1;object-fit:cover;
  transition:transform .5s var(--ease)}
.card--wide .card__media img{aspect-ratio:16/10}
.card:hover .card__media img{transform:scale(1.035)}
.card h3{font-size:clamp(16px,1.4vw,19px);letter-spacing:.04em;text-transform:uppercase;
  margin-bottom:var(--s3)}
.card p{margin-bottom:var(--s5);color:var(--body)}
.card .btn{align-self:flex-start;margin-top:auto}

.gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius-lg)}

/* numbered list (the approach) */
.steps{display:grid;gap:0;margin-top:var(--s5)}
.step{display:grid;grid-template-columns:auto 1fr;gap:var(--s5);
  padding-block:var(--s6);border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step__n{font-size:clamp(22px,2.2vw,30px);font-weight:700;color:var(--gold);
  font-variant-numeric:tabular-nums;line-height:1.1}
.step h3{font-size:14px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:var(--s3)}
@media(max-width:560px){.step{grid-template-columns:1fr;gap:var(--s2)}}

/* ---------- prose (service pages) ---------- */
.prose{max-width:80ch}
.prose > * + *{margin-top:var(--s4)}
.prose h2{font-size:clamp(19px,1.7vw,23px);letter-spacing:.06em;text-transform:uppercase;
  margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--line)}
.prose ul{padding-left:0;list-style:none}
.prose ul li{position:relative;padding-left:var(--s5);margin-top:var(--s2)}
.prose ul li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--ink-40)}
.prose strong{color:var(--ink);font-weight:600}
blockquote{margin-block:var(--s6);padding:var(--s5) 0 var(--s5) var(--s6);
  border-left:3px solid var(--gold);font-size:clamp(19px,1.8vw,24px);font-weight:600;
  color:var(--ink);line-height:1.34}
blockquote p{margin:0}

/* ---------- fees table ---------- */
.table-scroll{overflow-x:auto;margin-top:var(--s6);border:1px solid var(--line);
  border-radius:var(--radius-lg)}
table.fees{width:100%;border-collapse:collapse;font-size:clamp(14.5px,1.15vw,16.5px)}
table.fees th{text-align:left;font-weight:600;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);padding:var(--s4) var(--s5);
  background:var(--bg-soft);border-bottom:1px solid var(--line-strong);position:sticky;top:0}
table.fees th:last-child{text-align:right}
table.fees td{padding:14px var(--s5);border-bottom:1px solid var(--line);vertical-align:top}
table.fees tr:last-child td{border-bottom:0}
table.fees td:last-child{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;
  color:var(--ink);font-weight:600}
table.fees tr.cat td{white-space:normal;background:var(--bg-band);font-weight:700;color:var(--ink);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding-block:12px}
table.fees tr.item:hover td{background:var(--bg-soft)}

.notes{margin-top:var(--s9)}
.notes ul{list-style:none;padding:0;margin-top:var(--s5);display:grid;gap:var(--s3)}
.notes li{position:relative;padding-left:var(--s5);font-size:15.5px;color:var(--body)}
.notes li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--line-strong)}

/* ---------- languages band ---------- */
.langs{text-align:center}
.langs__title{font-size:clamp(17px,1.5vw,21px);font-weight:700;color:var(--ink);
  letter-spacing:.02em}
.langs__sub{margin-top:var(--s2);font-size:15px;color:var(--body)}
.langs__note{margin-top:var(--s1);font-size:14px;font-style:italic;color:var(--muted)}
.langs__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:var(--s5);margin-top:var(--s7)}
.lang{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--s6) var(--s5);transition:border-color .2s,box-shadow .2s,transform .2s var(--ease)}
.lang:hover{border-color:var(--line-strong);box-shadow:var(--shadow);transform:translateY(-2px)}
.lang img{width:38px;height:auto;margin:0 auto var(--s4);border-radius:3px;
  box-shadow:0 0 0 1px var(--line)}
.lang__name{font-weight:700;color:var(--ink);font-size:17px}
.lang__sub{font-size:14px;font-style:italic;color:var(--muted);margin:var(--s1) 0 var(--s5)}

/* ---------- get in touch ---------- */
.git__head{text-align:center;max-width:66ch;margin-inline:auto}
.git__head h1,.git__head h2{font-family:var(--display);font-size:clamp(22px,2.4vw,31px);
  letter-spacing:.04em;margin-top:var(--s3);text-transform:uppercase;color:var(--title)}
.git__head p{margin-top:var(--s4);color:var(--body)}
.git__grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,5vw,var(--s9));
  align-items:start;margin-top:var(--s8)}
@media(max-width:900px){.git__grid{grid-template-columns:1fr}}

.contact-list h3{font-size:13px;letter-spacing:.18em;text-transform:uppercase}
.contact-list__co{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin-top:var(--s1)}
.contact-row{display:grid;grid-template-columns:118px 1fr;gap:var(--s4);align-items:baseline;
  padding-block:14px;border-bottom:1px solid var(--line)}
.contact-row:first-of-type{margin-top:var(--s5);border-top:1px solid var(--line)}
.contact-row dt{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted)}
.contact-row dd{font-size:16px;color:var(--body)}
.contact-row a{color:var(--body);text-decoration:none;transition:color .15s}
.contact-row a:hover{color:var(--ink);text-decoration:underline}
.contact-list .btn{margin-top:var(--s6)}
.contact-list .reply{margin-top:var(--s3);font-size:13.5px;color:var(--muted)}

/* form */
.form-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(22px,3vw,var(--s7))}
.form-card h3{font-size:13px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:var(--s5)}
.field{margin-bottom:var(--s4)}
.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
@media(max-width:520px){.field-pair{grid-template-columns:1fr;gap:0}}
label{display:block;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px}
input,textarea{width:100%;background:#fff;border:1px solid var(--line-strong);
  border-radius:var(--radius);padding:12px 14px;font-size:15.5px;color:var(--body);
  transition:border-color .18s,box-shadow .18s}
input::placeholder,textarea::placeholder{color:#a4aab2}
input:focus,textarea:focus{outline:none;border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(17,17,17,.10)}
input:user-invalid,textarea:user-invalid{border-color:#b4433a}
textarea{resize:vertical;min-height:118px}

.vtype{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.vtype label{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;
  background:#fff;border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:13px 10px;cursor:pointer;font-size:12px;letter-spacing:.1em;color:var(--body);
  transition:border-color .18s,background .18s,color .18s}
.vtype label:hover{border-color:var(--ink-40)}
.vtype input{position:absolute;opacity:0;width:0;height:0}
.vtype input:checked + span,.vtype label:has(input:checked){border-color:var(--ink);
  background:var(--ink);color:#fff}
.vtype label:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}

.form-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  margin-top:var(--s5);flex-wrap:wrap}
.form-foot .req{font-size:12.5px;color:var(--muted)}
.form-status{margin-top:var(--s4);padding:14px 16px;border-radius:var(--radius);font-size:15px;
  display:none}
.form-status.show{display:block}
.form-status.ok{background:#eaf4ee;border:1px solid #b9d9c6;color:#1f5133}
.form-status.err{background:#fbeceb;border:1px solid #eec4c0;color:#8d332b}
.form-card.sent form{display:none}
button[disabled]{opacity:.6;cursor:progress}

/* ---------- FAQ ---------- */
.faq-row{display:grid;grid-template-columns:1fr 250px;gap:clamp(24px,4vw,var(--s8));
  align-items:center;padding-block:var(--s7);border-bottom:1px solid var(--line)}
.faq-row:first-of-type{border-top:1px solid var(--line)}
.faq-row img{width:250px;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius-lg)}
.faq-row h3{font-size:clamp(18px,1.6vw,22px);margin-bottom:var(--s3)}
.faq-row p{margin-bottom:var(--s5)}
@media(max-width:760px){
  .faq-row{grid-template-columns:1fr}
  .faq-row__media{order:-1}
  .faq-row img{width:100%;max-width:250px}
}

.qa{border:1px solid var(--line);border-radius:var(--radius-lg);margin-bottom:var(--s3);
  background:#fff;transition:border-color .2s,box-shadow .2s}
.qa[open]{border-color:var(--line-strong);box-shadow:var(--shadow)}
.qa summary{display:flex;align-items:flex-start;gap:var(--s4);cursor:pointer;list-style:none;
  padding:var(--s5);font-weight:600;color:var(--ink);font-size:clamp(15.5px,1.3vw,17.5px);
  line-height:1.4}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:none;width:11px;height:11px;margin-top:6px;margin-left:auto;
  border-right:2px solid var(--ink-40);border-bottom:2px solid var(--ink-40);
  transform:rotate(45deg);transition:transform .25s var(--ease)}
.qa[open] summary::after{transform:rotate(225deg);margin-top:9px}
.qa summary:hover{color:var(--ink-70)}
.qa__a{padding:0 var(--s5) var(--s5);color:var(--body)}
.qa__a p + p{margin-top:var(--s3)}

/* ---------- creed (the positioning statement) ---------- */
/* Vertical padding was 9vw, which on a wide screen left ~180px of dead space above
   and below. Capped so the section is generous, not empty. */
.creed{padding-block:clamp(56px,6vw,var(--s10))}
.creed__quote{margin:0;padding:0;border:0}
/* Sized so "With you at every stage of yacht ownership." holds on ONE line across
   desktop widths — the manual <br> then does the only line break. Measured: the line
   needs ~845px at 44px, so the cap is 40px and the left column was widened to suit.
   No max-width; the grid column is the constraint. Re-measure if the wording changes. */
.creed__quote p{font-size:clamp(24px,2.9vw,40px);font-weight:700;line-height:1.18;
  letter-spacing:-.022em;color:var(--title);max-width:none;text-wrap:normal}
.creed__sub p{font-size:clamp(16px,1.25vw,18px);line-height:1.65;color:var(--body)}
.creed__sub p + p{margin-top:var(--s4)}
.creed__sub{margin-top:var(--s6)}
@media(min-width:900px){
  /* The two columns share a top edge and a hairline, so they read as one statement
     rather than two blocks that happen to be side by side. */
  .creed .wrap{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
    gap:clamp(32px,4vw,var(--s8));align-items:start}
  .creed__sub{margin-top:8px;padding-left:clamp(24px,3vw,var(--s7));
    border-left:1px solid var(--line)}
}

/* ---------- facts ---------- */
/* Numeral above the label, not beside it. Side by side with an `auto` column the
   numeral width varied per item ("15+" vs "4"), so the text started at a different
   x in every column and the row looked ragged. */
.facts{display:grid;grid-template-columns:1fr;gap:clamp(28px,3vw,var(--s7))}
@media(min-width:700px){.facts{grid-template-columns:repeat(3,1fr)}}
.fact{padding-top:var(--s4);border-top:2px solid var(--gold)}
.fact__n{display:block;font-size:clamp(36px,3.4vw,48px);font-weight:700;line-height:1;
  color:var(--gold);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.fact p{margin-top:var(--s3);font-size:15px;line-height:1.55;color:var(--body);
  max-width:34ch}

/* ---------- numbered step cards ---------- */
.step-cards{margin-top:var(--s8)}
.step-card{display:flex;flex-direction:column}
.step-card .card__media{overflow:hidden;margin-bottom:var(--s5);background:var(--bg-band);
  border-radius:var(--radius-lg)}
.step-card .card__media img{width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .6s var(--ease)}
.step-card__head{display:flex;align-items:baseline;gap:var(--s3);
  padding-top:var(--s4);border-top:2px solid var(--gold)}
.step-card__n{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--gold);
  font-variant-numeric:tabular-nums}
.step-card h3{font-size:clamp(17px,1.5vw,21px);letter-spacing:.03em;text-transform:uppercase}
.step-card p{margin:var(--s3) 0 var(--s5);color:var(--body)}
.step-card .btn{align-self:flex-start;margin-top:auto}

/* ---------- testimonials ---------- */
/* Understated on purpose. This is supporting evidence, not the headline. */
.tsec{padding-block:clamp(44px,5vw,var(--s9))}
.thead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s5);
  flex-wrap:wrap;padding-bottom:var(--s4);border-bottom:1px solid var(--line)}
.thead h2{font-size:clamp(15px,1.4vw,18px);letter-spacing:.14em;text-transform:uppercase;
  color:var(--title)}

.tscore{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.tscore strong{font-size:15px;color:var(--ink)}
.tscore span{font-size:13px;color:var(--muted)}
.tscore:hover span{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.tstars{display:flex;gap:2px}
.tstars svg{width:12px;height:12px;fill:var(--star)}

.tgrid{display:grid;gap:clamp(24px,3vw,var(--s7));margin-top:var(--s6);
  grid-template-columns:1fr}
@media(min-width:640px){.tgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.tgrid{grid-template-columns:repeat(4,1fr)}}

.tcard{margin:0}
.tquote{margin:0;padding:0;border:0;font-size:14.5px;font-weight:400;line-height:1.6;
  color:var(--body);letter-spacing:0}
.tquote p{margin:0}
.tquote p::before{content:"\201C"} .tquote p::after{content:"\201D"}
.tby{margin-top:var(--s4);display:flex;flex-direction:column;gap:2px}
.tname{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink)}
.tvessel{font-size:12.5px;color:var(--faint)}

/* ---------- CTA ---------- */
.cta h2{font-size:clamp(25px,3vw,38px);line-height:1.16}
.cta p{margin-top:var(--s4);max-width:60ch}
.cta .btn-row{margin-top:var(--s6)}

/* ---------- footer ---------- */
.site-footer{background:var(--bg-soft);color:var(--body);border-top:1px solid var(--line);
  padding-block:clamp(48px,6vw,var(--s10)) var(--s6);margin-top:0}

.footer-top{display:grid;gap:clamp(32px,4vw,var(--s8))}
@media(min-width:760px){.footer-top{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){
  .footer-top{grid-template-columns:minmax(0,1.15fr) minmax(0,2.2fr) minmax(0,1fr);
    gap:clamp(40px,5vw,var(--s10))}
}

.footer-brand .roundel{width:84px;margin-bottom:var(--s4)}
.footer-name{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--title)}
.footer-tag{margin-top:var(--s3);font-size:14.5px;line-height:1.6;color:var(--muted);
  max-width:38ch}

.footer-nav{display:grid;gap:clamp(24px,3vw,var(--s6));
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.site-footer h4{color:var(--title);font-size:10.5px;letter-spacing:.19em;
  text-transform:uppercase;margin-bottom:var(--s4)}
.footer-col ul,.footer-contact ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.site-footer a{color:var(--body);text-decoration:none;font-size:15px;
  transition:color .15s}
.site-footer a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

.footer-contact ul{gap:9px}
.footer-contact li a{font-size:15.5px}
.footer-meta{margin-top:var(--s5);font-size:14px;line-height:1.7;color:var(--muted)}

.footer-bottom{margin-top:clamp(40px,5vw,var(--s9));padding-top:var(--s5);
  border-top:1px solid var(--line);display:flex;justify-content:space-between;
  gap:var(--s4);flex-wrap:wrap;font-size:13px;color:var(--faint)}
/* keep the last item clear of the floating WhatsApp button */
@media(min-width:520px){.footer-bottom{padding-right:clamp(0px,17vw,230px)}}

/* ---------- floating widgets ---------- */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:90;display:inline-flex;align-items:center;
  gap:9px;background:#fff;color:var(--ink);border:1px solid var(--line-strong);
  border-radius:100px;padding:12px 20px;font-size:11.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;text-decoration:none;box-shadow:var(--shadow);
  transition:transform .22s var(--ease),box-shadow .22s,border-color .22s}
.wa-float:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--ink)}
.wa-float svg{width:19px;height:19px;flex:none}
@media(max-width:520px){.wa-float{padding:13px;border-radius:50%}
  .wa-float .wa-label{display:none}}

.reviews{position:fixed;left:18px;bottom:18px;z-index:90;width:196px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);
  padding:12px 13px 9px;font-size:11.5px;
  opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.reviews.in{opacity:1;transform:none}
.reviews__top{display:flex;align-items:center;gap:7px;margin-bottom:9px}
.reviews__stars{display:flex;gap:2px}
.reviews__stars svg{width:11px;height:11px;fill:var(--star)}
.reviews__score{font-weight:700;color:var(--ink);font-size:11.5px}
.reviews__count{color:var(--faint);font-size:11px}
.reviews__q{font-style:italic;line-height:1.45;color:var(--body);min-height:46px}
.reviews__by{margin-top:10px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.reviews__name{font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reviews__g{display:flex;align-items:center;gap:4px;font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);flex:none}
.reviews__dots{display:flex;gap:4px;justify-content:center;margin-top:9px;padding-top:8px;
  border-top:1px solid var(--line)}
.reviews__dots button{width:5px;height:5px;padding:0;border:0;border-radius:50%;
  background:var(--line-strong);cursor:pointer;transition:background .2s,transform .2s}
.reviews__dots button[aria-current=true]{background:var(--ink);transform:scale(1.25)}
.reviews__close{position:absolute;top:6px;right:8px;background:none;border:0;cursor:pointer;
  color:var(--faint);font-size:15px;line-height:1;padding:4px}
.reviews__close:hover{color:var(--ink)}
/* The floating review card is desktop-only. On tablets it lands on top of the
   copy, and there is no hover to move it out of the way. Threshold matches the
   nav breakpoint so the two switch together. */
@media(max-width:1240px){.reviews{display:none}}

/* Fade-in on scroll.
   Deliberately scoped to .js — the class is set by an inline script in <head>.
   If JavaScript never runs (blocked, failed request, script error) the content
   must still be visible, so the hidden state is never the default. */
.js .reveal{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none}
}

/* ---------- print ---------- */
@media print{
  .site-header,.wa-float,.reviews,.btn,.langs,.langsw,.git__grid > .form-card{display:none!important}
  body{font-size:11pt;color:#000}
  .site-footer{background:none;color:#000;border-top:1px solid #999}
  .site-footer a{color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}

/* ---------- pillars (the two distinguishing capabilities) ---------- */
.pillars{display:grid;gap:clamp(28px,4vw,var(--s8));margin-top:var(--s6)}
@media(min-width:900px){.pillars{grid-template-columns:1fr 1fr}}
.pillar{display:grid;grid-template-columns:auto 1fr;gap:var(--s5);
  padding-top:var(--s5);border-top:2px solid var(--gold)}
.pillar__n{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--gold);
  font-variant-numeric:tabular-nums}
.pillar h3{font-size:clamp(19px,1.8vw,24px);margin-bottom:var(--s3);letter-spacing:-.015em}
.pillar p{color:var(--body)}
.pillar__tail{margin-top:var(--s4);padding-left:var(--s5);border-left:2px solid var(--line-strong);
  font-size:15.5px;color:var(--muted)}

/* ---------- corporate liaison split ---------- */
.corp{display:grid;gap:clamp(28px,5vw,var(--s9))}
@media(min-width:900px){.corp{grid-template-columns:.9fr 1.1fr;align-items:start}}
.ticks{list-style:none;padding:0;display:grid;gap:0}
.ticks li{position:relative;padding:14px 0 14px var(--s7);border-bottom:1px solid var(--line);
  color:var(--body)}
.ticks li:first-child{border-top:1px solid var(--line)}
.ticks li::before{content:"";position:absolute;left:4px;top:22px;width:16px;height:7px;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(-45deg)}

/* ---------- service page: prose + spec panel ---------- */
/* Prose alone left half the viewport empty on wide screens. The spec panel fills
   that column with the information enquiries ask for anyway. */
.page-split{display:grid;gap:clamp(32px,4vw,var(--s8));margin-top:var(--s7);align-items:start}
@media(min-width:960px){
  .page-split{grid-template-columns:minmax(0,1fr) 340px;gap:clamp(48px,6vw,var(--s10))}
  .spec{position:sticky;top:calc(var(--header-h,96px) + 24px)}
}
.page-split .prose{max-width:70ch}

.spec{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(22px,2.4vw,var(--s6))}
.spec__title{font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);margin-bottom:var(--s2)}
.spec__row{padding:13px 0;border-bottom:1px solid var(--line)}
.spec__row:last-of-type{border-bottom:0}
.spec__row dt{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:3px}
.spec__row dd{font-size:15.5px;color:var(--ink);line-height:1.45}
.spec__note{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line);
  font-size:14px;color:var(--muted);line-height:1.55}
.spec__cta{display:grid;gap:var(--s3);margin-top:var(--s5)}
.spec__cta .btn{width:100%}
.spec__reply{margin-top:var(--s3);font-size:13px;color:var(--faint);text-align:center}

/* ---------- "which do you need" decision rows ---------- */
.choose{margin-top:var(--s6)}
.choose__row{display:grid;gap:var(--s3);padding-block:var(--s5);
  border-top:1px solid var(--line-strong)}
.choose__row:last-child{border-bottom:1px solid var(--line-strong)}
@media(min-width:820px){
  .choose__row{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:clamp(24px,4vw,var(--s8));align-items:baseline}
}
.choose__q{font-size:clamp(16px,1.35vw,19px);font-weight:600;color:var(--ink);line-height:1.35}
.choose__a{color:var(--body)}

/* ---------- image treatment ----------
   Photographs stay in colour. A greyscale treatment was tried and rejected — the
   boats and the water are the point. Only a gentle zoom on hover. */
.card__media img,.gallery img,.faq-row img{transition:transform .6s var(--ease)}
.card:hover .card__media img,
.step-card:hover .card__media img{transform:scale(1.035)}

/* four-across variant of the pillar rows (home page process) */
@media(min-width:900px){.pillars--4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1180px){.pillars--4{grid-template-columns:repeat(4,1fr)}}
.pillars--4 .pillar h3{font-size:clamp(16px,1.35vw,19px);text-transform:uppercase;
  letter-spacing:.04em}
.pillars--4 .pillar p{font-size:15.5px}

/* ---------- capability grid (what management covers) ---------- */
/* Eight items — four columns makes two even rows. Keep the count a multiple of the
   column count or the last row ends up with a stub rule hanging off it. */
.capabilities{display:grid;gap:0;margin-top:var(--s6);grid-template-columns:1fr}
@media(min-width:640px){.capabilities{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.capabilities{grid-template-columns:repeat(4,1fr)}}
.capability{padding:var(--s5) var(--s5) var(--s5) 0;border-top:1px solid var(--line-strong)}
.capability h3{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--title);
  margin-bottom:var(--s2)}
.capability p{color:var(--body);font-size:15.5px;line-height:1.55}
@media(min-width:700px){.capability{padding-right:var(--s7)}}

/* the full service list, grouped under the three area cards */
.services{margin-top:clamp(36px,4.5vw,var(--s9));padding-top:var(--s6);
  border-top:1px solid var(--line);display:grid;gap:clamp(24px,3vw,var(--s7));
  grid-template-columns:1fr}
@media(min-width:640px){.services{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.services{grid-template-columns:repeat(3,1fr)}}
.services__col h3{font-size:11px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--title);margin-bottom:var(--s4);padding-bottom:var(--s3);
  border-bottom:1px solid var(--line-strong)}
.services__col ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.services__col li{font-size:13.5px;line-height:1;color:var(--body);background:#fff;
  border:1px solid var(--line);border-radius:100px;padding:9px 14px;
  transition:border-color .18s,color .18s,transform .18s var(--ease)}
.services__col li:hover{border-color:var(--gold);color:var(--ink);transform:translateY(-1px)}

/* the top-level nav list is transparent to the flex layout */
.nav-list{display:contents}
@media(max-width:1240px){.nav-list{display:block}}

/* ---------- about: prose beside the portrait ---------- */
.about-split{display:grid;gap:clamp(28px,4vw,var(--s9))}
@media(min-width:900px){
  .about-split{grid-template-columns:minmax(0,1fr) 380px;align-items:start}
  .portrait{position:sticky;top:calc(var(--header-h,128px) + 28px)}
}
@media(min-width:1300px){.about-split{grid-template-columns:minmax(0,1fr) 440px}}
.portrait{margin:0}
.portrait img{width:100%;border-radius:var(--radius-lg)}
.portrait figcaption{margin-top:var(--s3);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint)}