/*
Theme Name: Nautic Property Consultants Ireland
Theme URI: https://nautic.ie
Author: Built for Nautic Property Consultants
Description: A bright, fast, SEO- and AI-search-optimised theme for Nautic Property Consultants in Ireland. Dublin Docklands video hero, twelve service pages, area pages for Europe's data centre markets, a project register, JSON-LD schema and an llms.txt endpoint.
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary, for use on https://nautic.ie only
Text Domain: nautic
Tags: business, portfolio, custom-logo, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   Nautic Property Consultants, design system
   Bright Caribbean palette, editorial serif display, generous whitespace.
   ========================================================================== */

:root{
  /* White ground. The page itself is pure white; surfaces and bands are the
     faintest cool greys so the site reads as light and modern rather than
     cream. Warm tones are kept for accents on the dark sections only. */
  --bone:#FFFFFF;
  --paper:#FAFCFD;
  --shell:#EAF7F9;
  /* "Ink" is Cayman water at depth rather than navy. It is the text colour and
     the colour of the few solid dark elements the page still needs. */
  --ink:#06323D;
  --ink-2:#0C4D5B;
  --muted:#4E7480;
  --muted-2:#7FA2AC;
  /* Shallow to deep, the way the water actually grades off Seven Mile Beach.
     --aqua and --sea are decorative; --sea-deep is the one used behind or as
     small text, because it is the only one that clears 4.5:1 on white. */
  --aqua:#3FD9DF;
  --sea:#0FB2C4;
  --sea-mid:#0A93A8;
  --sea-deep:#067A85;
  --sea-em:#0C8F9E;
  --sea-pale:#E2F8FA;
  --sea-wash:#F2FCFD;
  --sand:#E2CFAE;
  --sand-pale:#F5ECDC;
  --coral:#E0703F;
  --line:#DFEDF0;
  --line-2:#C6DEE3;

  --maxw:1280px;
  --gut:clamp(20px,5vw,64px);
  --r:2px;
  --r-lg:4px;

  --ff-display:Calibri,Carlito,"Segoe UI",system-ui,-apple-system,sans-serif;
  --ff-body:Calibri,Carlito,"Segoe UI",system-ui,-apple-system,sans-serif;

  --t-fast:.24s cubic-bezier(.22,.61,.36,1);
  --t:.45s cubic-bezier(.22,.61,.36,1);
  --t-slow:.9s cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1;
  font-family:var(--ff-body);font-size:17px;line-height:1.65;
  font-weight:400;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4,h5{margin:0;font-weight:400;letter-spacing:-.022em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--sea);outline-offset:3px;border-radius:2px}
::selection{background:var(--sea);color:#fff}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap-wide{max-width:1560px;margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(52px,6vw,96px)}
.sec-tight{padding-block:clamp(40px,4.2vw,68px)}
.sec-bone{background:var(--bone)}
.sec-paper{background:var(--paper)}
.sec-shell{background:var(--shell)}
/* Formerly a navy block. It is now shallow water: bright, with dark text. */
.sec-ink{background:linear-gradient(165deg,var(--sea-pale) 0%,var(--sea-wash) 100%);color:var(--ink)}
.sec-ink h2,.sec-ink h3{color:var(--ink)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:12px;top:12px}

/* ---------- type ---------- */
/* Uppercase micro-type needs more size than lowercase to read at the same ease,
   and wide tracking makes it thinner still. 0.7rem was about 12px, which is the
   floor rather than a comfortable setting. */
.eyebrow{
  display:inline-flex;align-items:center;gap:.7em;
  font-size:.88rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--sea-deep);margin:0 0 1.4rem;
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--sea);opacity:.6;display:block}
.eyebrow-plain::before{display:none}

.d1{font-family:var(--ff-display);font-size:clamp(2.7rem,6.6vw,5.4rem);line-height:1.01;letter-spacing:-.033em;font-weight:400}
.d2{font-family:var(--ff-display);font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1.07;letter-spacing:-.028em}
.d3{font-family:var(--ff-display);font-size:clamp(1.55rem,2.6vw,2.3rem);line-height:1.15;letter-spacing:-.022em}
.d4{font-family:var(--ff-display);font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:1.22}
.em{font-style:normal;color:var(--sea-em)}
.sec-ink .em{color:var(--sea-deep)}
.lede{font-size:clamp(1.1rem,1.5vw,1.32rem);line-height:1.6;color:var(--ink-2);max-width:62ch}
.body-lg{font-size:1.06rem;color:var(--muted);max-width:70ch}
.muted{color:var(--muted)}
.measure{max-width:66ch}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--ink);--fg:#fff;--bd:var(--ink);
  display:inline-flex;align-items:center;gap:.65em;
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);
  padding:.92em 1.55em;border-radius:100px;
  font-size:.86rem;font-weight:600;letter-spacing:.01em;cursor:pointer;
  transition:transform var(--t-fast),background var(--t-fast),color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);
  text-align:center;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px -12px rgba(6,50,61,.5)}
.btn .arw{transition:transform var(--t-fast)}
.btn:hover .arw{transform:translateX(4px)}
.btn-sea{--bg:var(--sea-deep);--bd:var(--sea-deep)}
.btn-sea:hover{--bg:#055F6A;--bd:#055F6A}
.btn-ghost{--bg:transparent;--fg:var(--ink);--bd:var(--line-2)}
.btn-ghost:hover{--bg:var(--ink);--fg:#fff;--bd:var(--ink)}
.btn-light{--bg:#fff;--fg:var(--ink);--bd:#fff}
.btn-outline-light{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.4)}
.btn-outline-light:hover{--bg:#fff;--fg:var(--ink);--bd:#fff}
.btn-sm{padding:.7em 1.15em;font-size:.8rem}

.tlink{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:.85rem;font-weight:600;letter-spacing:.01em;color:var(--sea-deep);
  border-bottom:1px solid transparent;transition:border-color var(--t-fast),gap var(--t-fast)
}
.tlink:hover{border-color:currentColor;gap:.8em}

/* ---------- header ---------- */
.hdr{
  position:fixed;inset:0 0 auto;z-index:100;
  transition:background var(--t),box-shadow var(--t),border-color var(--t);
  border-bottom:1px solid transparent;
}
.hdr-in{display:flex;align-items:center;gap:clamp(14px,2vw,36px);height:78px}
.hdr.solid{background:rgba(255,255,255,.9);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom-color:var(--line);box-shadow:0 1px 30px -18px rgba(6,50,61,.5)}
.brand{display:flex;align-items:center;flex:0 0 auto;margin-right:auto}
.brand img{height:34px;width:auto;transition:opacity var(--t)}
.brand .lg-light{display:none}
.brand .lg-dark{display:block}
.hdr.always-solid{
  background:var(--bone);border-bottom-color:var(--line);
  box-shadow:0 1px 24px -16px rgba(6,50,61,.45)
}


.nav{display:flex;align-items:center;gap:clamp(10px,1.6vw,26px)}
.nav > li > a,.nav > li > button{
  display:inline-flex;align-items:center;gap:.4em;
  background:none;border:0;padding:8px 2px;cursor:pointer;
  font-size:.88rem;font-weight:500;color:var(--ink);
  position:relative;transition:color var(--t-fast);
}
.nav > li > a::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-fast)
}
.nav > li > a:hover::after{transform:scaleX(1)}
.nav .caret{width:9px;height:9px;transition:transform var(--t-fast)}
.nav li.open .caret{transform:rotate(180deg)}
.hdr-tel{display:inline-flex;align-items:center;gap:.5em;font-size:.86rem;font-weight:600;white-space:nowrap}
.hdr-cta{display:flex;align-items:center;gap:12px;flex:0 0 auto}

/* mega menu */
.mega{
  position:absolute;left:0;right:0;top:100%;
  background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  box-shadow:0 30px 60px -30px rgba(6,50,61,.28);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--t-fast),transform var(--t-fast),visibility var(--t-fast);
}
li.open > .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,48px);padding:clamp(28px,3.4vw,48px) 0}
.mega-col h4{font-size:.82rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--sea-deep);margin-bottom:1rem}
.mega-col li + li{margin-top:.15rem}
.mega-col a{display:block;padding:.5rem .6rem;margin-left:-.6rem;border-radius:var(--r-lg);transition:background var(--t-fast)}
.mega-col a:hover{background:var(--sea-pale)}
.mega-col .mn{display:block;font-size:.95rem;font-weight:600}
.mega-col .ms{display:block;font-size:.8rem;color:var(--muted);line-height:1.45;margin-top:.1rem}
.mega-feat{background:var(--shell);border-radius:var(--r-lg);padding:20px;align-self:start}
.mega-feat .k{font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sea-deep);font-weight:700}
.mega-feat p{font-size:.86rem;color:var(--muted);margin:.5rem 0 1rem}

/* burger + mobile */
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:22px;height:1.5px;background:currentColor;transition:transform var(--t-fast),opacity var(--t-fast)}
.burger span + span{margin-top:5px}
.burger.on span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mob{
  position:fixed;inset:78px 0 0;background:var(--bone);z-index:99;
  display:flex;flex-direction:column;
  transform:translateY(-8px);opacity:0;visibility:hidden;transition:all var(--t-fast)
}
.mob.on{transform:none;opacity:1;visibility:visible}
.mob-scroll{
  flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;padding:10px var(--gut) 8px
}
.mob-link{
  display:block;padding:.85rem 0;border-bottom:1px solid var(--line);
  font-size:1.1rem;font-weight:600
}
.mob details{border-bottom:1px solid var(--line)}
.mob details > summary{
  list-style:none;cursor:pointer;padding:.85rem 0;position:relative;
  font-size:1.1rem;font-weight:600
}
.mob details > summary::-webkit-details-marker{display:none}
.mob details > summary::after{
  content:"";position:absolute;right:4px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--t-fast)
}
.mob details[open] > summary::after{transform:translateY(-30%) rotate(225deg)}
.mob-sub{padding:0 0 .6rem}
.mob-sub a{
  display:block;padding:.58rem 0 .58rem .9rem;font-size:.97rem;color:var(--ink-2);
  border-left:2px solid var(--line-2);margin-left:2px
}
.mob-foot{
  flex:0 0 auto;padding:12px var(--gut) calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--paper);
  display:grid;grid-template-columns:1fr 1fr;gap:10px
}
.mob-foot .btn{width:100%}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(560px,82vh,820px);display:flex;align-items:center;overflow:hidden;color:var(--ink);background:var(--bone)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg svg,.hero-bg img{width:100%;height:100%;object-fit:cover;display:block}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 26%);
}
.hero-in{position:relative;z-index:2;width:100%;padding-block:clamp(128px,15vh,180px) clamp(40px,7vh,84px)}
.hero .eyebrow{
  color:var(--sea-deep);font-size:.86rem;letter-spacing:.17em;font-weight:700;
  margin-bottom:1.6rem
}
.hero .eyebrow::before{width:38px;height:2px;opacity:1}
.hero h1{max-width:19ch}
.hero .em{color:var(--sea-deep)}
.hero-sub{max-width:54ch;margin-top:1.4rem;font-size:clamp(1.02rem,1.35vw,1.2rem);color:var(--ink-2)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:2.1rem}
.hero-creds{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,3vw,44px)}
.hero-creds .cd{display:flex;flex-direction:column;gap:2px}
.hero-creds .cd b{font-size:.94rem;font-weight:700;letter-spacing:.06em}
.hero-creds .cd b{color:var(--ink)}
.hero-creds .cd span{font-size:.72rem;color:var(--muted);letter-spacing:.03em}
.hero-bar{background:var(--paper);border-block:1px solid var(--line);padding-block:clamp(22px,3vw,34px)}
.hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:18px;margin-top:26px}
.hero-stats .st b{display:block;font-family:var(--ff-display);font-size:clamp(1.6rem,2.7vw,2.3rem);line-height:1}
.hero-stats .st-word b{font-size:clamp(1.05rem,1.7vw,1.45rem);line-height:1.15}
.hero-stats{padding-top:24px;border-top:1px solid var(--line)}
.hero-stats .st b{color:var(--ink)}
.hero-stats .st span{display:block;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:.5rem}
.scroll-cue{position:absolute;right:var(--gut);bottom:34px;z-index:3;display:flex;align-items:center;gap:8px;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.scroll-cue i{display:block;width:1px;height:38px;background:linear-gradient(180deg,var(--sea),transparent);animation:cue 2.2s infinite}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}

/* page hero (inner pages) */
.phero{position:relative;padding-block:clamp(132px,16vh,196px) clamp(46px,6vw,78px);background:var(--bone);color:var(--ink);overflow:hidden;border-bottom:1px solid var(--line)}
.phero .pbg{position:absolute;inset:0}
.phero .pbg svg{width:100%;height:100%}
.phero-in{position:relative;z-index:2}
.phero h1{max-width:20ch}
.phero p{max-width:60ch;margin-top:1.1rem;color:var(--ink-2);font-size:1.06rem}

/* breadcrumbs */
.crumbs{display:flex;flex-wrap:wrap;gap:.45em;font-size:.83rem;color:var(--muted);margin-bottom:1.4rem}
.crumbs a:hover{color:var(--sea-deep);text-decoration:underline}
.crumbs span{opacity:.5}

/* ---------- marquee ---------- */
.marq{background:var(--sea);color:#fff;padding:14px 0;overflow:hidden;white-space:nowrap}
.marq-t{display:inline-flex;gap:0;animation:marq 42s linear infinite;will-change:transform}
.marq:hover .marq-t{animation-play-state:paused}
.marq-t span{display:inline-flex;align-items:center;font-size:.82rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;padding-inline:20px}
.marq-t span::after{content:"✦";color:rgba(255,255,255,.6);margin-left:20px;font-size:.7rem}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marq-t{animation:none}}

/* ---------- generic section head ---------- */
.shead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(20px,4vw,72px);align-items:end;margin-bottom:clamp(36px,4.5vw,64px)}
.shead .r{padding-bottom:.4rem}
@media (max-width:900px){.shead{grid-template-columns:1fr;align-items:start}}

/* A section head whose left column carries a standfirst as well as a heading.
   The default bottom alignment is right when the right column holds a single
   link, but here the left column is far taller, which left the paragraph
   stranded at the foot of the row and the standfirst jammed under the
   heading. Centring the two blocks against each other reads as one unit. */
.shead-lede{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(20px,3vw,56px);align-items:center}
.shead-lede .d2{max-width:16ch;text-wrap:balance}
.shead-lede .lede{margin-top:clamp(14px,1.5vw,22px);max-width:52ch;line-height:1.5}
.shead-lede .body-lg{max-width:56ch}
.shead-lede .r{padding-bottom:0}
@media (max-width:900px){.shead-lede{grid-template-columns:1fr;align-items:start}}

/* ---------- intro split ---------- */
.split{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,5vw,88px);align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:2rem}
.chip{display:inline-flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:.7rem .95rem;min-width:118px}
.chip b{font-size:.92rem;letter-spacing:.06em}
.chip span{font-size:.72rem;color:var(--muted);line-height:1.35;margin-top:2px}

/* ---------- services ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1px}
.svc{background:var(--paper);padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column;gap:.8rem;position:relative;box-shadow:0 0 0 1px var(--line);transition:background var(--t-fast),transform var(--t-fast)}
.svc:hover{background:var(--sea-pale)}
.svc .no{font-size:.72rem;font-weight:700;letter-spacing:.14em;color:var(--sea-deep)}
.svc h3{font-family:var(--ff-display);font-size:1.35rem;line-height:1.2}
.svc p{font-size:.92rem;color:var(--muted);flex:1}
.svc .go{display:inline-flex;align-items:center;gap:.45em;font-size:.8rem;font-weight:600;color:var(--sea-deep)}
.svc .go svg{transition:transform var(--t-fast)}
.svc:hover .go svg{transform:translateX(4px)}
.svc::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--sea);transform:scaleX(0);transform-origin:left;transition:transform var(--t)}
.svc:hover::after{transform:scaleX(1)}
.svc-cta{grid-column:span 2;background:var(--sea-wash);justify-content:center}
.svc-cta:hover{background:var(--sea-wash)}
.svc-cta::after{display:none}
.svc-cta p{flex:0 1 auto;max-width:46ch}
.svc-cta .btn{align-self:flex-start;margin-top:.4rem}
@media (max-width:700px){.svc-cta{grid-column:span 1}}

/* ---------- project cards ---------- */
.pcards{display:grid;gap:clamp(30px,4vw,64px)}
.pcard{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(20px,3.4vw,60px);align-items:center}
.pcard:nth-child(even) .pc-media{order:2}
.pc-media{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-lg);background:var(--shell)}
.pc-media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow)}
.pcard:hover .pc-media img{transform:scale(1.045)}
.pc-tag{position:absolute;left:14px;top:14px;z-index:2;display:inline-flex;gap:8px}
.tag{display:inline-block;background:rgba(255,255,255,.94);color:var(--ink);font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.42em .7em;border-radius:100px}
.tag-sea{background:var(--sea);color:#fff}

/* On a card with no image the badge is a flat label, so its first letter lines
   up exactly with the location line underneath it rather than sitting inside a
   pill that pushes the text inwards. */
.pg-top .tag{
  background:none;padding:0;border-radius:0;
  font-size:.82rem;letter-spacing:.12em;line-height:1.2
}
.pg-top .tag-nautic{color:var(--sea-deep)}
.pg-top .tag-team{color:var(--muted-2)}
.pc-body h3{font-family:var(--ff-display);font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.12;margin-bottom:.7rem}
.pc-body .loc{font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;color:var(--sea-deep);font-weight:600;margin-bottom:.8rem}
.pc-body p{color:var(--muted);font-size:.98rem}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:1px;margin:1.4rem 0}
.facts div{background:var(--paper);padding:.85rem .9rem;box-shadow:0 0 0 1px var(--line)}
.facts dt{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);font-weight:600}
.facts dd{margin:.3rem 0 0;font-size:.92rem;font-weight:600;line-height:1.3}


/* ---------- project index ---------- */
/* Cards are display:flex, which beats the browser's own [hidden] rule, so the
   filter had no visible effect until this was added. */
[hidden]{display:none !important}

/* Experience tabs */
.ptabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:26px}
.ptab{
  background:none;border:0;cursor:pointer;padding:.85em 1.15em;
  font-size:.9rem;font-weight:600;color:var(--muted);
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color var(--t-fast),border-color var(--t-fast)
}
.ptab:hover{color:var(--ink)}
.ptab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--sea)}
.ptab .pt-n{font-size:.82rem;color:var(--muted-2);margin-left:.45em;font-weight:500}
.ptab[aria-selected="true"] .pt-n{color:var(--sea-deep)}
.ptab-note{font-size:.88rem;color:var(--muted);margin:-12px 0 24px;max-width:70ch}
.pempty{padding:44px 0;text-align:center;color:var(--muted)}
.nd{color:var(--muted-2);font-size:.86em}

/* Accreditations, explained */
.accs{display:grid;grid-template-columns:repeat(auto-fit,minmax(206px,1fr));gap:clamp(20px,2.2vw,32px)}
.accs li{padding-top:18px;border-top:1px solid var(--line-2)}
.accs li b{display:block;font-family:var(--ff-display);font-size:1.45rem;color:var(--ink);letter-spacing:-.01em;line-height:1.16}
.accs .acc-full{display:block;font-size:.83rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sea-deep);margin:.35rem 0 .7rem}
.accs li p{font-size:.92rem;color:var(--muted);margin:0}

.fblock{margin-bottom:18px}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fchip{
  background:var(--paper);border:1px solid var(--line-2);border-radius:100px;
  padding:.5em 1em;font-size:.8rem;font-weight:600;cursor:pointer;
  transition:all var(--t-fast);white-space:nowrap
}
.fchip:hover{border-color:var(--sea)}
.fchip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.flabel{display:block;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);font-weight:700;margin-bottom:9px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:clamp(18px,2.2vw,30px)}
.pg{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;position:relative;transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast)}
.pg::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--sea);opacity:0;transition:opacity var(--t-fast)}
.pg:hover::before{opacity:1}
.pg-top{margin-bottom:.2rem}
.pg:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(6,50,61,.42);border-color:var(--line-2)}
.pg-body{padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;gap:.6rem;flex:1}
.pg-body .loc{font-size:.83rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sea-deep);font-weight:700}
.pg-body h3{font-family:var(--ff-display);font-size:clamp(1.28rem,1.7vw,1.5rem);line-height:1.16}
.pg-body p{font-size:.88rem;color:var(--muted)}
/* The blurb takes the slack, not the location line above it, or the headings
   sit at a different height on every card. */
.pg-body p:not(.loc){flex:1 1 auto}
.pg-body .loc{flex:0 0 auto}
.pg-meta{display:flex;flex-wrap:wrap;gap:.4rem .9rem;padding-top:.7rem;border-top:1px solid var(--line);font-size:.83rem;color:var(--muted)}
.pg-meta b{color:var(--ink);font-weight:600}
.count{font-size:.8rem;color:var(--muted);margin-bottom:14px}

/* register table */
.tablewrap{overflow-x:auto;border:1px solid var(--line);background:var(--paper);border-radius:var(--r-lg)}
table.reg{width:100%;border-collapse:collapse;font-size:.88rem;min-width:820px}
table.reg th,table.reg td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
table.reg th{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);font-weight:700;background:var(--shell);position:sticky;top:0}
table.reg tbody tr:hover{background:var(--sea-pale)}
table.reg td:first-child{font-weight:600}
table.reg .dash{color:var(--muted-2)}

/* ---------- numbered list ---------- */
/* The hairlines used to be 1px grid gaps over a coloured background, which meant
   an empty cell at the end of a ragged row showed up as a pale block. The rules
   now belong to the items, so a short last row simply ends. */
.nlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(20px,2.4vw,34px) clamp(24px,2.8vw,44px)}
.nlist li{padding-top:18px;border-top:1px solid var(--line-2);display:flex;gap:1rem}
.nlist .n{font-size:.72rem;font-weight:700;color:var(--sea-deep);letter-spacing:.1em;padding-top:.28rem;flex:0 0 auto}
.nlist h4{font-family:var(--ff-display);font-size:1.16rem;margin-bottom:.35rem}
.nlist p{font-size:.9rem;color:var(--muted)}


/* ---------- checklist ---------- */
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:.9rem 2.2rem}
.checks li{display:flex;gap:.8rem;font-size:.95rem;line-height:1.5}
.checks svg{flex:0 0 auto;margin-top:.28rem;color:var(--sea)}
.sec-ink .checks svg{color:var(--sea-deep)}

/* ---------- stats band ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px}
.stats .s{background:var(--bone);padding:clamp(24px,3vw,40px) clamp(18px,2vw,28px);box-shadow:0 0 0 1px var(--line)}
.stats b{display:block;font-family:var(--ff-display);font-size:clamp(2.1rem,4vw,3.2rem);line-height:1;color:var(--sea-deep)}
.stats span{display:block;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:.7rem}

/* ---------- accordion ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.3rem 3rem 1.3rem 0;position:relative;
  font-family:var(--ff-display);font-size:clamp(1.06rem,1.5vw,1.28rem);line-height:1.35;
  transition:color var(--t-fast)
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--sea-deep)}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-70%) rotate(45deg);transition:transform var(--t-fast)
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .ans{padding:0 clamp(20px,6vw,90px) 1.5rem 0;color:var(--muted);font-size:.98rem;max-width:80ch}

/* ---------- areas ---------- */
.areas{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1px}
.area{background:var(--paper);padding:clamp(20px,2.4vw,30px);box-shadow:0 0 0 1px var(--line);transition:background var(--t-fast)}
.area:hover{background:var(--sea-pale)}
.area h3{font-family:var(--ff-display);font-size:1.2rem;margin-bottom:.45rem}
.area p{font-size:.88rem;color:var(--muted)}

/* ---------- CTA band ---------- */
.cta{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--sea-mid) 0%,var(--sea-deep) 58%,#05606B 100%);color:#fff}
.cta .cbg{position:absolute;inset:0;opacity:.55}
.cta .cbg svg{width:100%;height:100%}
.cta-in{position:relative;z-index:2;padding-block:clamp(66px,8vw,118px)}
.cta h2{max-width:17ch}
.cta p{max-width:52ch;margin-top:1rem;color:rgba(255,255,255,.82)}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:2rem}

/* ---------- contact ---------- */
.cgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:start}
@media (max-width:900px){.cgrid{grid-template-columns:1fr}}
.cbox{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,3vw,34px)}
.cbox h3{font-family:var(--ff-display);font-size:1.3rem;margin-bottom:1.2rem}
.cline{display:flex;gap:.9rem;padding:.9rem 0;border-bottom:1px solid var(--line)}
.cline:last-child{border-bottom:0}
.cline svg{flex:0 0 auto;margin-top:.25rem;color:var(--sea)}
.cline .k{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);font-weight:700}
.cline .v{font-size:.98rem;font-weight:500;margin-top:.15rem}
.cline a:hover{color:var(--sea-deep)}
.form{display:grid;gap:14px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.form .row{grid-template-columns:1fr}}
.field label{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--muted-2);margin-bottom:.4rem}
.field input,.field select,.field textarea{
  width:100%;background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:.8rem .9rem;font:inherit;font-size:.95rem;color:var(--ink);transition:border-color var(--t-fast),box-shadow var(--t-fast)
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--sea);box-shadow:0 0 0 3px var(--sea-pale)}
.field textarea{min-height:130px;resize:vertical}

/* ---------- footer ---------- */
.ftr{background:linear-gradient(172deg,#08808F 0%,#05606B 100%);color:rgba(255,255,255,.84);padding-block:clamp(50px,6vw,80px) 0}
.ftr-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.9fr) minmax(0,.9fr) minmax(0,1.2fr);gap:clamp(24px,3vw,48px);padding-bottom:clamp(36px,4vw,56px)}
/* Ten services in one column made the footer twice as tall as it needed to be. */
.ftr-svc ul{columns:2;column-gap:clamp(16px,1.8vw,30px)}
.ftr-svc li{break-inside:avoid}
@media (max-width:980px){.ftr-svc ul{columns:1}}
@media (max-width:980px){.ftr-top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ftr-top{grid-template-columns:1fr}}
.ftr img.flogo{height:38px;width:auto;margin-bottom:1.1rem}
.ftr p{font-size:.9rem;line-height:1.6;max-width:44ch}
.ftr h4{font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;font-weight:700;margin-bottom:1rem}
.ftr li + li{margin-top:.5rem}
.ftr a{font-size:.9rem;transition:color var(--t-fast)}
.ftr a:hover{color:#fff}
.ftr-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.4rem}
.fbadge{border:1px solid rgba(255,255,255,.22);border-radius:100px;padding:.35em .85em;font-size:.72rem;font-weight:700;letter-spacing:.1em;color:#fff}
.ftr-bot{border-top:1px solid rgba(255,255,255,.14);padding-block:22px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.8rem}
.socials{display:flex;gap:10px}
.socials a{width:34px;height:34px;border:1px solid rgba(255,255,255,.22);border-radius:50%;display:grid;place-items:center;transition:all var(--t-fast)}
.socials a:hover{background:#fff;color:var(--ink);border-color:#fff}

/* ---------- prose ---------- */
.prose h2{font-family:var(--ff-display);font-size:clamp(1.5rem,2.4vw,2rem);margin:2.4rem 0 .9rem;line-height:1.16}
.prose h3{font-family:var(--ff-display);font-size:1.25rem;margin:1.8rem 0 .6rem}
.prose p{color:var(--ink-2);max-width:72ch}
.prose ul{margin:1rem 0;display:grid;gap:.6rem}
.prose ul li{position:relative;padding-left:1.4rem;color:var(--ink-2);max-width:70ch}
.prose ul li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--sea)}

/* answer box (AI search / featured snippet) */
.answer{
  background:var(--sea-pale);border-left:3px solid var(--sea);
  padding:clamp(20px,2.6vw,30px);border-radius:0 var(--r-lg) var(--r-lg) 0;margin-bottom:2rem
}
.answer .k{font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--sea-deep);margin-bottom:.6rem;display:block}
.answer p{font-size:1.04rem;line-height:1.62;color:var(--ink);max-width:78ch;margin:0}

.note{font-size:.82rem;color:var(--muted);border-left:2px solid var(--line-2);padding-left:1rem;max-width:78ch}

/* sticky side nav on service pages */
.svc-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:clamp(30px,5vw,80px);align-items:start}
/* The section is as tall as its tallest column. When the sidebar is the taller
   one, the padding underneath doubles the empty space, so it is trimmed here. */
.sec-svc{padding-bottom:clamp(28px,3vw,44px)}
@media (max-width:1020px){.svc-layout{grid-template-columns:1fr}}
.side{position:sticky;top:104px;display:grid;gap:14px}
@media (max-width:1020px){.side{position:static}}
.side-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.side-card h4{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sea-deep);font-weight:700;margin-bottom:.9rem}
.side-card li + li{margin-top:.15rem}
.side-card a{display:block;padding:.4rem 0;font-size:.88rem;border-bottom:1px solid var(--line);transition:color var(--t-fast),padding-left var(--t-fast)}
.side-card a:hover{color:var(--sea-deep);padding-left:5px}
.side-card li:last-child a{border-bottom:0}
.side-cta{background:linear-gradient(140deg,var(--sea-mid),#05606B);color:#fff;border-radius:var(--r-lg);padding:24px}
.side-cta h4{color:#BFF3F7;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.6rem}
.side-cta p{font-size:.88rem;color:rgba(255,255,255,.78);margin-bottom:1.1rem}

/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* utilities */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mt-s{margin-top:1rem}.mt-m{margin-top:2rem}.mt-l{margin-top:3rem}
.center{text-align:center}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,48px)}
@media (max-width:820px){.grid-2{grid-template-columns:1fr}}

/* responsive */
@media (max-width:1080px){
  .nav,.hdr-tel{display:none}
  .burger{display:block}
  .hdr-cta .btn{display:none}
  .hdr-cta .btn.keep{display:inline-flex}
}
@media (max-width:820px){
  .pcard{grid-template-columns:1fr}
  .pcard:nth-child(even) .pc-media{order:0}
  .hero-stats{grid-template-columns:repeat(2,1fr);gap:14px}
  .mega-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .hero{min-height:88vh}
}

/* ---------- phone refinements ---------- */
@media (max-width:760px){
  /* filters become a swipeable strip instead of a wall of chips */
  .filters{
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    padding-bottom:10px;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);
    scrollbar-width:none;
  }
  .filters::-webkit-scrollbar{display:none}
  .fchip{scroll-snap-align:start;flex:0 0 auto;min-height:42px;display:inline-flex;align-items:center}

  .brand img{height:28px}
  .hdr-in{height:68px}
  .hdr-cta .btn.keep{padding:.72em 1rem;font-size:.78rem}
  .mob{inset:68px 0 0}
  .mob-link,.mob details > summary{padding:.95rem 0;font-size:1.05rem}
  .mob-sub a{padding:.62rem 0 .62rem .9rem}
  .mob-foot .btn{justify-content:center}
  .burger{padding:12px 8px}

  .hero-in{padding-block:104px 46px}
  /* the backdrop's left-to-right fade does little on a narrow screen, so lay a
     vertical scrim under the heading instead, in whichever direction the hero
     treatment needs */
  .hero-bg::before{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,
      rgba(255,255,255,.90) 0%,
      rgba(255,255,255,.62) 42%,
      rgba(255,255,255,.12) 68%,
      rgba(255,255,255,0) 84%)
  }
  .hero-media.has-photo .hero-bg::before{
    background:linear-gradient(180deg,
      rgba(4,44,54,.70) 0%,
      rgba(4,44,54,.46) 46%,
      rgba(4,44,54,.38) 100%)
  }
  .hero-creds{gap:18px 26px}
  .hero-stats{grid-template-columns:repeat(2,1fr);gap:20px 14px}

  .facts{grid-template-columns:repeat(2,1fr)}
  .svc{padding:22px 20px}
  .side{gap:12px}

  /* horizontal scroll affordance on the project list */
  .tablewrap{position:relative}
  .tablewrap::after{
    content:"Swipe to see more →";display:block;font-size:.72rem;color:var(--muted);
    padding:.6rem 1rem;border-top:1px solid var(--line);background:var(--shell)
  }
  .cta-actions .btn,.hero-actions .btn{width:100%;justify-content:center}
}

@media (max-width:420px){
  .hdr-cta .btn.keep{display:none}
  .brand img{height:30px}
  .d1{font-size:clamp(2.2rem,10vw,2.9rem)}
}

/* anything tappable clears the 44px target on touch devices */
@media (hover:none){
  .btn,.fchip,.tlink,.nav > li > a{min-height:44px;display:inline-flex;align-items:center}
  .faq summary{padding-block:1.15rem}
  .burger{min-height:44px;min-width:44px;display:grid;place-content:center}
  .ftr a,.side-card a,.mega-col a{display:inline-block;padding-block:9px}
  .ftr li + li{margin-top:.2rem}
  .pg-body h3 a,.pc-body h3 a{display:inline-block;padding-block:4px}
}

@media print{
  .hdr,.mob,.marq,.cta,.scroll-cue{display:none}
  body{background:#fff}
}

/* ==========================================================================
   Home page: media hero, facts band, bento grid
   Every tile works with or without a photograph behind it.
   ========================================================================== */

/* ---------- hero ----------
   Two treatments. With the Seven Mile Beach artwork the hero stays bright and
   the type is ink, because a Caribbean practice should not open on a dark
   screen. With a real photograph behind it the hero switches to the darkened
   treatment white type needs. */
.hero-media{min-height:clamp(560px,80vh,820px);color:var(--ink)}
.hero-media .hero-bg img.hero-photo{width:100%;height:100%;object-fit:cover;display:block}

/* bright treatment: a soft wash, just enough to hold the type */
.hero-media .hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(255,255,255,.93) 0%,
    rgba(255,255,255,.70) 34%,
    rgba(255,255,255,.22) 62%,
    rgba(255,255,255,0) 88%)
}
.hero-media .hero-in{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:36px;
  padding-block:clamp(140px,17vh,190px) clamp(30px,4vh,52px)
}
.hero-media .hero-sub{color:var(--ink-2);max-width:46ch;font-size:clamp(1rem,1.3vw,1.14rem);margin-top:1.4rem}
.hero-head{max-width:16ch;color:var(--ink)}
.hh-line{display:inline}
.hh-rot{display:inline-block;position:relative;vertical-align:baseline}
.hh-word{display:inline-block;color:var(--sea-deep);font-style:normal}

/* photograph treatment */
.hero-media.has-photo{color:#fff}
.hero-media.has-photo .hero-bg::after{
  background:
    linear-gradient(95deg, rgba(4,44,54,.58) 0%, rgba(4,44,54,.26) 34%, rgba(4,44,54,0) 64%),
    linear-gradient(0deg, rgba(4,44,54,.26) 0%, rgba(4,44,54,0) 38%)
}
/* the headline carries its own shadow, so the wash can stay light */
.hero-media.has-photo .hero-head,
.hero-media.has-photo .hero-sub,
.hero-media.has-photo .eyebrow{text-shadow:0 2px 18px rgba(4,44,54,.55)}
.hero-media.has-photo .hero-head{color:#fff}
.hero-media.has-photo .hh-word{color:var(--sand)}
.hero-media.has-photo .hero-sub{color:rgba(255,255,255,.88)}
.hero-media.has-photo .eyebrow{color:var(--sand)}
.hero-media.has-photo .eyebrow::before{background:var(--sand);opacity:1}
.hero-media.has-photo .btn{--bg:#fff;--fg:var(--ink);--bd:#fff}
.hero-media.has-photo .btn:hover{--bg:var(--sand);--bd:var(--sand)}
.hero-media.has-photo .qcard{
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff
}
.hero-media.has-photo .qcard:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5)}

.hh-word.out{animation:hhOut .42s cubic-bezier(.4,0,.7,.2) forwards}
.hh-word.in{animation:hhIn .52s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes hhOut{to{opacity:0;transform:translateY(-.38em) rotateX(45deg)}}
@keyframes hhIn{from{opacity:0;transform:translateY(.38em) rotateX(-45deg)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .hh-word.out,.hh-word.in{animation:none;opacity:1;transform:none}
}

.hero-quick{display:grid;gap:12px;width:min(420px,38vw)}
.qcard{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px 22px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);
  color:var(--ink);font-size:1.04rem;font-weight:600;
  box-shadow:0 18px 40px -28px rgba(6,50,61,.5);
  transition:background var(--t-fast),transform var(--t-fast),border-color var(--t-fast)
}
.qcard:hover{background:#fff;border-color:#fff;transform:translateY(-2px)}
.qcard .arw{flex:0 0 auto;color:var(--sea-deep)}
.hero-media.has-photo .qcard .arw{color:#fff}

/* ---------- key facts ---------- */
.facts-band{background:linear-gradient(180deg,var(--sea-pale),var(--sea-wash));padding-block:clamp(38px,4.4vw,62px);border-bottom:1px solid var(--line)}
.facts-row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,34px);margin-top:26px}
.fact{
  display:flex;flex-direction:column;gap:.2rem;position:relative;
  padding:26px 24px 60px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;
  transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast)
}
.fact::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--sea)}
.fact-deep::before{background:var(--sea-deep)}
.fact-sand::before{background:var(--sand)}
.fact-coral::before{background:var(--coral)}
.fact:hover{transform:translateY(-4px);box-shadow:0 24px 46px -28px rgba(6,50,61,.44);border-color:var(--line-2)}
.fact-n{font-family:var(--ff-display);font-size:clamp(2.4rem,4.2vw,3.5rem);line-height:1;color:var(--sea-deep);letter-spacing:-.03em;font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.fact-sand .fact-n{color:#9C7B3F}
.fact-coral .fact-n{color:var(--coral)}
.fact-l{font-family:var(--ff-display);font-size:clamp(1.2rem,1.8vw,1.55rem);line-height:1.1;color:var(--ink)}
.fact-s{font-size:.92rem;color:var(--muted);margin-top:.5rem}
.fact-go{
  position:absolute;left:24px;bottom:22px;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line-2);display:grid;place-content:center;color:var(--sea-deep);
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast)
}
.fact:hover .fact-go{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- bento ---------- */
.bento-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(258px,auto);gap:clamp(12px,1.4vw,20px);margin-top:clamp(28px,4vw,52px)
}
.b-1{grid-column:span 1}
.b-wide{grid-column:span 2}
.b-tall{grid-column:span 2;grid-row:span 2}

.bento{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  display:flex;align-items:flex-end;min-height:258px;color:#fff;
  transition:transform var(--t-fast),box-shadow var(--t-fast)
}
.bento:hover{transform:translateY(-4px);box-shadow:0 28px 54px -30px rgba(6,50,61,.5)}

/* colour field used when there is no photograph */
.bento::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(145deg,var(--t1),var(--t2))
}
/* Shallow at the top left, deep at the bottom right, where the label sits.
   Every --t2 clears 4.5:1 against white text; the --t1 values are free to be
   as bright as the water actually is. */
.tone-sea{--t1:#3FD9DF;--t2:#067A85}
.tone-deep{--t1:#17C2CE;--t2:#05616E}
.tone-sand{--t1:#8FE6E2;--t2:#0A7C87}
.tone-coral{--t1:#5FE0D6;--t2:#06727E}
.tone-ink{--t1:#12B5C4;--t2:#054F5B}

/* a soft light across the whole tile so a photograph-less tile still has depth */
.bento::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 90% at 82% 8%,rgba(255,255,255,.22),rgba(255,255,255,0) 58%)
}
.bento.has-img::after{display:none}

.bento-img{position:absolute;inset:0;z-index:0}
.bento-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  object-position:var(--focus,50% 50%);transition:transform var(--t-slow)
}
.bento:hover .bento-img img{transform:scale(1.05)}
.bento.has-img .bento-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(4,44,54,.88) 0%,rgba(4,44,54,.54) 30%,rgba(4,44,54,.14) 54%,rgba(4,44,54,0) 78%)
}
.bento.has-img .bento-body{text-shadow:0 1px 12px rgba(4,44,54,.5)}

.bento-body{position:relative;z-index:1;padding:clamp(20px,2vw,30px);width:100%}
.bento-k{
  display:block;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:rgba(255,255,255,.82);margin-bottom:.55rem
}
.bento-body h3{font-family:var(--ff-display);font-size:clamp(1.3rem,1.9vw,1.75rem);line-height:1.12;color:#fff}
.b-tall .bento-body h3{font-size:clamp(1.7rem,2.9vw,2.5rem)}
.bento-body p{
  font-size:.92rem;color:rgba(255,255,255,.82);margin:.55rem 0 0;max-width:44ch;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.b-tall .bento-body p{-webkit-line-clamp:3;font-size:1rem}
.bento-go{
  display:inline-grid;place-content:center;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.45);margin-top:1rem;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast)
}
.bento:hover .bento-go{background:#fff;color:var(--ink);border-color:#fff}

/* ---------- home responsive ---------- */
@media (max-width:1080px){
  .facts-row{grid-template-columns:repeat(2,1fr)}
  .bento-grid{grid-template-columns:repeat(2,1fr)}
  .b-tall{grid-column:span 2;grid-row:span 1;min-height:300px}
  .b-wide{grid-column:span 2}
}
@media (max-width:900px){
  .hero-media .hero-in{grid-template-columns:1fr;align-items:start;gap:30px}
  .hero-quick{width:100%;grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .hero-media{min-height:auto}
  .hero-media .hero-in{padding-block:118px 40px}
  .hero-head{max-width:none}
  .hero-quick{grid-template-columns:1fr}
  .qcard{padding:16px 18px;font-size:.98rem}
  .facts-row{grid-template-columns:1fr;gap:12px}
  .fact{padding:22px 20px 56px}
  .bento-grid{grid-template-columns:1fr}
  .b-1,.b-wide,.b-tall{grid-column:span 1}
  .bento{min-height:230px}
  .hero-media .hero-actions .btn{width:100%;justify-content:center}
}

/* a single statement in place of two paragraphs of practice copy */
.statement{max-width:52ch}
.statement .lede{margin-top:1rem}
.statement .chips{gap:8px}
.statement .chip b{font-size:.9rem}

/* the home page lists the territories by name; the detail lives on the areas page */
.areas-compact .area p{display:none}
.areas-compact .area{padding-block:clamp(20px,2vw,28px)}

/* ==========================================================================
   Main page header
   The same treatment as the home hero, on every inner page.
   ========================================================================== */
.mhead{
  position:relative;overflow:hidden;background:var(--sea-deep);color:#fff;
  display:flex;align-items:flex-end;min-height:clamp(290px,36vh,420px)
}
.mhead-bg{position:absolute;inset:0;z-index:0;background:var(--sea-deep)}
.mhead-bg img{
  width:100%;height:100%;object-fit:cover;display:block;
  object-position:var(--focus,50% 50%)
}
.mhead-bg::after{
  content:"";position:absolute;inset:0;
  /* An ocean panel for the heading to sit on, rather than a grey wash over the
     whole photograph. The right of the picture stays completely bright, and the
     tint is deep water rather than neutral grey, so it reads Caribbean. */
  /* One panel on the left for the heading, and nothing else. The second,
     full width band underneath used to tint the right hand corners, which read
     as a green cast across the part of the photograph that should be clean. */
  /* Just the photograph, with a neutral shadow under the heading so the white
     type still holds. A coloured panel read as a green block laid over the
     picture; near black reads as shading, which is all it is. */
  background:
    linear-gradient(95deg, rgba(8,18,22,.74) 0%, rgba(8,18,22,.58) 26%,
      rgba(8,18,22,.34) 44%, rgba(8,18,22,.12) 60%, rgba(8,18,22,0) 76%)
}
/* Caribbean light, not a grey winter afternoon. A gentle lift to saturation and
   brightness on every photograph across the site. */
.mhead-bg img,.hero-photo,.bento-img img,.life-shot img,.svc-img img,
.pg-media img,.pc-media img,.team-shot img{
  filter:saturate(1.13) brightness(1.10) contrast(1.01)
}
.mhead h1,.mhead .eyebrow,.mhead-lede,.mhead .crumbs{text-shadow:0 2px 18px rgba(4,10,14,.9),0 1px 3px rgba(4,10,14,.7)}
/* With no photograph the header is open water: bright turquoise at the top,
   grading to depth at the bottom, where the heading sits and needs the
   contrast. Vertical on purpose, so the text always lands on the dark end. */
.mhead:not(.has-photo) .mhead-bg{
  background:linear-gradient(180deg,#19C2D0 0%,#0A93A8 42%,#05606B 100%)
}
.mhead-in{
  position:relative;z-index:1;width:100%;
  padding-block:clamp(118px,14vh,160px) clamp(32px,4.5vh,54px)
}
.mhead .crumbs,.mhead .crumbs a{color:rgba(255,255,255,.88)}
.mhead .crumbs a:hover{color:#fff}
.mhead .eyebrow{color:#BFF3F7;margin-top:1.1rem}
.mhead .eyebrow::before{background:#BFF3F7;opacity:1}
.mhead h1{color:#fff;max-width:20ch}
.mhead.has-photo h1{max-width:17ch}
.mhead.has-photo .mhead-lede{max-width:40ch}
.mhead .em{color:#BFF3F7}
.mhead-lede{
  color:rgba(255,255,255,.86);max-width:56ch;margin-top:1.2rem;
  font-size:clamp(1rem,1.25vw,1.14rem)
}
@media (max-width:640px){
  .mhead{min-height:auto}
  .mhead-in{padding-block:112px 40px}
  .mhead h1,.mhead.has-photo h1{max-width:none}
  /* On a phone the text spans the full width, so the panel runs top to bottom
     rather than left to right. */
  .mhead-bg::after{
    background:linear-gradient(180deg, rgba(8,18,22,.30) 0%, rgba(8,18,22,.22) 22%, rgba(8,18,22,.46) 52%, rgba(8,18,22,.64) 100%)
  }
}

/* service cards carry a photograph of the work behind the label */
.svc{position:relative;overflow:hidden}
.svc-img{position:absolute;inset:0;z-index:0;display:block}
.svc-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  object-position:var(--focus,50% 50%);transition:transform var(--t-slow)
}
.svc.has-img:hover .svc-img img{transform:scale(1.05)}
.svc.has-img::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(4,44,54,.42) 0%,rgba(4,44,54,.54) 58%,rgba(4,44,54,.64) 100%)
}
.svc-body{position:relative;z-index:2;display:block}
.svc.has-img .svc-body{text-shadow:0 1px 10px rgba(4,44,54,.85),0 1px 2px rgba(4,44,54,.55)}
.svc.has-img,.svc.has-img h3,.svc.has-img .go{color:#fff}
.svc.has-img .no{color:rgba(255,255,255,.66)}
.svc.has-img p{color:rgba(255,255,255,.86)}

/* ---------- hero video ----------
   The drawn scene paints first, then the clip fades in over it once it can
   actually play. Phones and reduced-motion never load the file at all. */
.hero-bg .hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s ease;z-index:1;pointer-events:none
}
.hero-bg .hero-video.ready{opacity:1}
.hero-bg .hero-photo{position:absolute;inset:0;z-index:1}
.hero-bg > svg{position:absolute;inset:0;width:100%;height:100%}
.hero-media .hero-bg::after{z-index:2}
.hero-media .hero-bg::before{z-index:3}

/* the Life section is people, so its tiles stay a consistent height */
.bento-life .bento{min-height:300px}

/* customizer-set hero photo should not fight the drawn scene */
.hero-media.has-photo .hero-bg > svg{opacity:0}

/* a portrait team photograph, shown at a size that suits it */
.team-shot{margin:0;max-width:760px}
.team-shot img{
  width:100%;height:auto;display:block;border-radius:var(--r-lg);
  box-shadow:0 30px 60px -38px rgba(6,50,61,.5)
}
.team-shot figcaption{
  margin-top:.9rem;font-size:.86rem;color:var(--muted)
}

/* the service line is the same on every card, so it reads as a label */
.pg-meta span b{color:var(--ink);font-weight:700}
.pg-meta{color:var(--muted)}
/* The media box had no shape of its own, so each card was as tall as whatever
   photograph happened to land in it. A fixed frame makes every card line up. */
.pg-media{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--sea-pale)}
.pg-media img{width:100%;height:100%;object-fit:cover;display:block}
/* Pins the service line to the bottom of every card whatever the blurb length. */
.pg-meta{margin-top:auto}

/* ==========================================================================
   Life at Nautic
   These are photographs of people. Laying a caption over them covered faces
   and forced a dark wash across the picture, so the caption now sits under a
   clean, undarkened photo in a consistent frame.
   ========================================================================== */
.life-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.6vw,26px);margin-top:clamp(28px,4vw,52px)
}
.life-card{
  display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast)
}
.life-card:hover{transform:translateY(-4px);border-color:var(--sea);box-shadow:0 26px 48px -32px rgba(6,50,61,.42)}
.life-shot{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--sea-pale)}
.life-shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  object-position:var(--focus,50% 50%);transition:transform var(--t-slow)
}
.life-card:hover .life-shot img{transform:scale(1.04)}
.life-body{padding:clamp(16px,1.5vw,22px);display:flex;flex-direction:column;gap:.35rem}
.life-k{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--sea-deep)}
.life-body h3{font-family:var(--ff-display);font-size:clamp(1.15rem,1.5vw,1.4rem);line-height:1.15;color:var(--ink)}
.life-go{display:inline-flex;align-items:center;gap:.45em;margin-top:.3rem;font-size:.8rem;font-weight:600;color:var(--sea-deep)}
.life-card:hover .life-go .arw{transform:translateX(4px)}
@media (max-width:1100px){.life-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.life-grid{grid-template-columns:1fr}}

/* An even grid for the project tiles. Mixing wide and square tiles produced
   the very long, letterboxed frames that cropped buildings to a strip. */
.bento-even{grid-template-columns:repeat(3,1fr)}
.bento-even .bento{grid-column:span 1;grid-row:span 1}
@media (max-width:980px){.bento-even{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.bento-even{grid-template-columns:1fr}}

/* Accent words sitting on water need a pale tint, not the deep one used on
   white, or they disappear into the background behind them. */
.cta .em,.side-cta .em,.ftr .em{color:#BFF3F7}

/* Coverage, stated once and quietly, rather than a full section on every page. */
.arealine{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.4rem;font-size:.88rem}
.arealine-k{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--sea-deep)}
.arealine a{color:var(--muted);border-bottom:1px solid transparent;transition:color var(--t-fast),border-color var(--t-fast)}
.arealine a:hover{color:var(--ink);border-bottom-color:var(--line-2)}

.life-sub{font-size:.88rem;color:var(--muted);line-height:1.45;margin:.15rem 0 .1rem}

/* ==========================================================================
   Phones
   A small screen holds the same text over a much smaller photograph, so the
   washes cover proportionally more of the picture and everything reads darker
   than it does on a desktop. These lighten the washes and lift the photographs
   a little further, for phones only.
   ========================================================================== */
@media (max-width:700px){
  .mhead-bg img,.hero-photo,.bento-img img,.life-shot img,.svc-img img,
  .pg-media img,.pc-media img,.team-shot img{
    filter:saturate(1.14) brightness(1.16) contrast(1.01)
  }
  /* Tiles: keep the strip behind the label, clear the rest of the photograph. */
  .bento.has-img .bento-img::after{
    background:linear-gradient(0deg,rgba(4,44,54,.88) 0%,rgba(4,44,54,.74) 28%,
      rgba(4,44,54,.44) 52%,rgba(4,44,54,.10) 76%,rgba(4,44,54,0) 92%)
  }
  .svc.has-img::before{
    background:linear-gradient(180deg,rgba(4,44,54,.30) 0%,rgba(4,44,54,.44) 58%,rgba(4,44,54,.56) 100%)
  }
  .hero-media.has-photo .hero-bg::after{
    background:
      linear-gradient(0deg, rgba(4,44,54,.52) 0%, rgba(4,44,54,.20) 46%, rgba(4,44,54,0) 74%)
  }
  /* The type carries more of the contrast now, so it needs a firmer shadow. */
  .bento.has-img .bento-body,.svc.has-img .svc-body{
    text-shadow:0 1px 10px rgba(4,10,14,.9),0 1px 2px rgba(4,10,14,.7)
  }
  /* Solid white for the breadcrumbs rather than darkening the photo for them. */
  .mhead .crumbs,.mhead .crumbs a{color:#fff}
}
/* A card with no link of its own keeps the frame but loses the hover lift, so
   nothing invites a click that leads nowhere. */
.life-card-static{cursor:default}
.life-card-static:hover{transform:none;border-color:var(--line);box-shadow:none}
.life-card-static:hover .life-shot img{transform:none}

/* Ireland: a deep ground under the Docklands hero, so the headline still reads
   in the moment before the still and the clip arrive. */
.hero-media.has-photo .hero-bg{background:var(--ink)}

/* ==========================================================================
   Areas We Serve map
   Europe in pale sea tones, one pin per market. Hovering a pin or a name in
   the list lights up both, so the map and the list read as one thing.
   ========================================================================== */
.amap{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.amap-fig{margin:0;position:sticky;top:110px}
.amap-svg{display:block;width:100%;height:auto;background:var(--sea-pale);border:1px solid var(--line);border-radius:var(--r-lg)}
.amap-land path{fill:#fff;stroke:#BFDDE3;stroke-width:1.1;stroke-linejoin:round}
.amap-pin{cursor:pointer;outline:none}
.amap-halo{fill:var(--sea);opacity:.18;transition:opacity var(--t-fast),r var(--t-fast)}
.amap-dot{fill:var(--sea-deep);stroke:#fff;stroke-width:2.5;transition:fill var(--t-fast)}
.amap-tip{opacity:0;transition:opacity var(--t-fast);pointer-events:none}
.amap-tip text{
  font-family:var(--ff-display);font-size:26px;font-weight:700;fill:var(--ink);
  paint-order:stroke;stroke:#fff;stroke-width:7px;stroke-linejoin:round
}
.amap-pin:hover .amap-tip,.amap-pin:focus-visible .amap-tip,.amap-pin.is-hot .amap-tip{opacity:1}
.amap-land{pointer-events:none}
/* With script running, one shared label drawn on top replaces the per-pin ones. */
.amap.has-js .amap-tip{display:none}
.amap-label{
  font-family:var(--ff-display);font-size:26px;font-weight:700;fill:var(--ink);
  paint-order:stroke;stroke:#fff;stroke-width:7px;stroke-linejoin:round;
  opacity:0;transition:opacity var(--t-fast);pointer-events:none
}
.amap-label.on{opacity:1}
.amap-pin:hover .amap-halo,.amap-pin:focus-visible .amap-halo,.amap-pin.is-hot .amap-halo{opacity:.45;r:22px}
.amap-pin:hover .amap-dot,.amap-pin:focus-visible .amap-dot,.amap-pin.is-hot .amap-dot{fill:var(--coral,#E0745A)}
.amap-cap{margin-top:.6rem;font-size:.8rem;color:var(--muted)}
.amap-region + .amap-region{margin-top:clamp(20px,2.4vw,30px)}
.amap-region h3{
  font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--sea-deep);padding-bottom:.6rem;border-bottom:1px solid var(--line);margin-bottom:.2rem
}
.amap-list ul{list-style:none;margin:0;padding:0}
.amap-list li a{display:block;padding:.7rem .2rem;border-bottom:1px solid var(--line);transition:background var(--t-fast)}
.amap-list li a:hover,.amap-list li a.is-hot{background:var(--sea-pale)}
.amap-n{display:block;font-family:var(--ff-display);font-size:1.08rem;color:var(--ink);line-height:1.3}
.amap-b{display:block;font-size:.88rem;color:var(--muted);line-height:1.45;margin-top:.15rem}
@media (max-width:900px){
  .amap{grid-template-columns:1fr}
  .amap-fig{position:static}
  .amap-tip text,.amap-label{font-size:34px;stroke-width:9px}
}