/* =========================================================================
   SON OF THE SEA DEVELOPMENTS
   Layout modelled on cjdevelopments.com.au at Sean's direction:
   solid navy header bar, full bleed hero photo with a white enquiry card
   floating over it, then white and pale sections alternating with one deep
   navy band. White dominant, navy structural.
   Rounded images, cards and pill buttons throughout.
   ========================================================================= */

:root{
  --hull:#263A4F;          /* sampled from the logo */
  --hull-deep:#132330;
  --hull-mid:#31485F;
  --hull-line:rgba(255,255,255,.15);

  --white:#fff;
  --mist:#EDF2F7;          /* pale relief, chroma pulled toward the hull navy */
  --line:#DCE3E9;

  /* No third colour. Navy and white only, the way the logo is.
     Actions invert with the surface: navy on light, white on navy. */

  --ink:#16232F;           /* headings on light */
  --body:#46586A;          /* body on light, 7.33 on white */
  --muted:#5C6E80;
  --sea:#C3D0DB;           /* body on navy, 7.42 */
  --sea-dim:#93A6B6;

  --shell:1220px;
  --gut:clamp(20px,5vw,40px);

  /* rounding */
  --r-btn:999px;
  --r-card:20px;
  --r-img:16px;
  --r-field:10px;

  --t-hero:clamp(2.5rem,5.4vw,4.05rem);
  --t-1:clamp(1.95rem,3.9vw,3rem);
  --t-2:clamp(1.42rem,2.4vw,1.9rem);
  --t-3:clamp(1.08rem,1.5vw,1.26rem);
  --t-lede:clamp(1.04rem,1.4vw,1.18rem);

  --f:"Onest","Helvetica Neue",Arial,sans-serif;
  --out:cubic-bezier(.22,1,.36,1);
  --out-expo:cubic-bezier(.16,1,.3,1);
  /* Two layer soft shadow, the O'Brien pattern. A tight contact shadow plus a
     wider ambient one reads as lift rather than as a drop shadow. */
  --shadow:0 4px 10px -4px rgba(19,35,48,.10), 0 18px 44px -12px rgba(19,35,48,.22);
  --shadow-sm:0 2px 4px -2px rgba(19,35,48,.06), 0 4px 10px -2px rgba(19,35,48,.12);

  --z-base:1; --z-raised:10; --z-sticky:100; --z-header:200; --z-overlay:300;
}

*,*::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(--white);color:var(--body);
  font-family:var(--f);font-size:17px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0;text-wrap:pretty}
ul{margin:0;padding:0;list-style:none}

/* Matched to the logo, not chosen by taste.
   The words SON, SEA and the letters S O N E A were cut out of the supplied
   logo PNG and scored by pixel overlap against every heavy sans and display
   family on Google Fonts (532 of them). Onest at weight 900 was the closest
   at 0.887 mean IoU. Bricolage Grotesque, used previously, ranked 86th at
   0.795. Rendered tracking matches the logo at 0 em, so do not tighten it. */
h1,h2,h3{
  margin:0;font-weight:900;line-height:1.1;letter-spacing:-.004em;
  text-wrap:balance;color:var(--ink);
}
h3{font-weight:800;letter-spacing:0}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.band{padding-block:clamp(58px,8.5vw,116px)}
.band--tight{padding-block:clamp(44px,6vw,80px)}
.mist{background:var(--mist)}
.navy{background:var(--hull);color:var(--sea)}
.navy h1,.navy h2,.navy h3{color:#fff}

.t-hero{font-size:var(--t-hero)}
.t-1{font-size:var(--t-1)}
.t-2{font-size:var(--t-2)}
.lede{font-size:var(--t-lede);line-height:1.6;max-width:60ch}
.dim{color:var(--muted)}
.navy .dim{color:var(--sea-dim)}

/* One kicker style, used sparingly, never above every section */
.kick{
  font-size:.83rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--hull);margin-bottom:14px;
}
.navy .kick{color:#fff}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:700;font-size:1rem;letter-spacing:-.005em;
  padding:15px 30px;border:1.5px solid transparent;border-radius:var(--r-btn);
  text-decoration:none;cursor:pointer;
  transition:background .25s var(--out),color .25s var(--out),border-color .25s var(--out),box-shadow .25s var(--out),transform .2s var(--out);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--act{background:var(--hull);color:#fff;border-color:var(--hull);box-shadow:var(--shadow-sm)}
.btn--act:hover{background:var(--hull-deep);border-color:var(--hull-deep)}
/* on navy and over the hero the action inverts to white */
.navy .btn--act,.hero .btn--act{background:#fff;color:var(--hull);border-color:#fff}
.navy .btn--act:hover,.hero .btn--act:hover{background:var(--mist);border-color:var(--mist);color:var(--hull-deep)}
/* but inside a white card the action must stay navy, or it is white on white */
.card .btn--act,.navy .card .btn--act,.hero .card .btn--act{
  background:var(--hull);color:#fff;border-color:var(--hull);
}
.card .btn--act:hover,.navy .card .btn--act:hover,.hero .card .btn--act:hover{
  background:var(--hull-deep);border-color:var(--hull-deep);color:#fff;
}
.btn--navy{background:var(--hull);color:#fff;border-color:var(--hull)}
.btn--navy:hover{background:var(--hull-deep);border-color:var(--hull-deep)}
.btn--line{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--line:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.navy .btn--line,.hero .btn--line{color:#fff;border-color:rgba(255,255,255,.5)}
.navy .btn--line:hover,.hero .btn--line:hover{background:#fff;color:var(--hull);border-color:#fff}
.btn--block{width:100%}
.btn svg{width:16px;height:16px;flex:0 0 auto}

.ulink{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:700;
  color:var(--hull);transition:gap .25s var(--out);
  border-bottom:1.5px solid var(--hull);padding-bottom:3px;
}
.ulink:hover{gap:14px}
.ulink svg{width:15px;height:15px}

/* ---------------- Header: utility strip over the navy nav bar ----------------
   The strip reads left to right as one line. Nothing is pushed to the far
   right: the previous version used margin-inline-start:auto on the last item,
   which left a 1600px gap at 1440px wide and read as broken. */
/* ---------------- Header ----------------
   Navy bar, white logo and white nav sit on it. This rule was lost when the
   utility strip was cut out; without it the bar had no background and the
   white content was invisible against the page. */
.hdr{position:sticky;top:0;z-index:var(--z-header);background:var(--hull)}
.hdr__in{display:flex;align-items:center;gap:20px;height:clamp(62px,5.4vw,80px)}
.hdr__mark img{height:clamp(21px,2.3vw,29px);width:auto}
.hdr__nav{display:none;margin-inline-start:auto}
@media(min-width:1020px){
  .hdr__nav{display:flex;gap:32px;align-items:center}
  .hdr__nav a{
    text-decoration:none;color:rgba(255,255,255,.85);font-weight:500;font-size:.98rem;
    padding-bottom:4px;
    background:linear-gradient(#fff,#fff) 0 100%/0 2px no-repeat;
    transition:background-size .4s var(--out),color .25s;
  }
  .hdr__nav a:hover{color:#fff;background-size:100% 2px}
}
.hdr__tel{
  display:none;color:#fff;text-decoration:none;font-weight:700;font-size:1.02rem;
  align-items:center;gap:9px;margin-inline-start:auto;
}
@media(min-width:700px){.hdr__tel{display:inline-flex}}
@media(min-width:1020px){.hdr__tel{margin-inline-start:0}}
.hdr__tel svg{width:16px;height:16px;color:#fff}
.hdr__tel:hover{color:var(--sea)}
.hdr__cta{display:none}
@media(min-width:1020px){.hdr__cta{display:inline-flex;padding:12px 26px;font-size:.95rem}}
/* header and drawer sit on navy, so the action there is a white pill */
.hdr__cta,.drawer .btn--act{background:#fff;color:var(--hull);border-color:#fff}
.hdr__cta:hover,.drawer .btn--act:hover{background:var(--mist);border-color:var(--mist);color:var(--hull-deep)}
.burger{
  display:grid;place-items:center;width:44px;height:44px;margin-inline-start:auto;
  background:transparent;border:1px solid rgba(255,255,255,.32);color:#fff;cursor:pointer;
  border-radius:var(--r-btn);
}
@media(min-width:1020px){.burger{display:none}}
.burger svg{width:20px;height:20px}
.drawer{
  position:fixed;inset:0;z-index:var(--z-overlay);background:var(--hull-deep);
  display:flex;flex-direction:column;justify-content:center;gap:4px;padding:var(--gut);
  opacity:0;visibility:hidden;transition:opacity .35s var(--out),visibility .35s;
}
.drawer.open{opacity:1;visibility:visible}
.drawer a{
  color:#fff;text-decoration:none;font-size:clamp(1.6rem,6.5vw,2.2rem);font-weight:800;
  letter-spacing:-.03em;padding-block:12px;border-bottom:1px solid var(--hull-line);
}
.drawer .btn{margin-top:26px;border-bottom:0}
.drawer__x{
  position:absolute;top:calc(var(--gut) - 2px);right:var(--gut);width:44px;height:44px;
  display:grid;place-items:center;background:transparent;border:1px solid rgba(255,255,255,.32);
  color:#fff;cursor:pointer;border-radius:var(--r-btn);
}
.drawer__x svg{width:20px;height:20px}

/* ---------------- Inner page header ----------------
   Inner pages carry no video, so the navy band does the work the hero does
   on the home page. Deliberately shorter so the content starts sooner. */
.phead{background:var(--hull);color:var(--sea);padding-block:clamp(44px,6vw,86px) clamp(38px,5vw,72px)}
.phead h1{color:#fff;font-size:var(--t-1);max-width:20ch}
.phead .kick{color:#fff}
.phead .lede{margin-top:16px;max-width:58ch}

/* ---------------- Hero: photo + floating enquiry card ---------------- */
.hero{position:relative;isolation:isolate;background:var(--hull)}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__video{
  width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  display:block;background:var(--hull-deep);
}
/* The clip is bright sand and shallow water, so the wash is heavier than a
   photo would need. Every hero string is measured against the brightest
   frame, not against an average. */
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(19,35,48,.82) 0%,rgba(19,35,48,.6) 34%,rgba(19,35,48,.4) 66%,rgba(19,35,48,.5) 100%),
    linear-gradient(100deg,rgba(19,35,48,.7) 0%,rgba(19,35,48,.54) 36%,rgba(19,35,48,.3) 66%,rgba(19,35,48,.2) 100%);
}
.hero__in{
  position:relative;display:grid;gap:clamp(30px,4vw,52px);
  padding-block:clamp(48px,7vw,96px) clamp(52px,7vw,104px);
}
@media(min-width:980px){
  .hero__in{grid-template-columns:1.06fr .94fr;align-items:center}
}
.hero h1{color:#fff;max-width:16ch}
.hero .lede{margin-top:20px;color:#DCE5EB;max-width:48ch}
.hero__do{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero__do .btn{flex:1 1 230px}
@media(min-width:560px){.hero__do .btn{flex:0 0 auto}}
.creds{
  border-top:1px solid var(--hull-line);margin-top:28px;padding-top:16px;
  display:flex;flex-wrap:wrap;gap:8px 28px;font-size:.9rem;color:var(--sea-dim);
}
.creds .lic{color:#fff;font-weight:700;display:inline-flex;align-items:center;gap:9px}
.creds .lic::before{content:"";width:9px;height:9px;border-radius:50%;background:#fff;flex:0 0 auto}

/* Small screens: the dock already carries Call and Get a quote at all times,
   so the hero shows one action and puts the licence in front of it. Measured:
   everything clears the dock at 393x660. */
@media(max-width:559px){
  .hero__in > div:first-child{display:flex;flex-direction:column}
  .hero h1{order:1}
  .hero .lede{order:2}
  .hero .creds{order:3;margin-top:22px;padding-top:14px}
  .hero__do{order:4;margin-top:22px}
  .hero__do .btn--line{display:none}
  .creds .areas{display:none}
}

/* the card that defines the reference layout */
.card{
  background:#fff;border-radius:var(--r-card);box-shadow:var(--shadow);
  padding:clamp(24px,3vw,36px);color:var(--body);
}
.card h2{font-size:clamp(1.35rem,2.1vw,1.7rem)}
/* A card is a light surface wherever it sits, so its headings stay ink even
   when the section around it is navy. */
.navy .card h1,.navy .card h2,.navy .card h3,.hero .card h1,.hero .card h2,.hero .card h3{color:var(--ink)}
.navy .card,.hero .card{color:var(--body)}
.card__sub{margin-top:8px;font-size:.97rem;color:var(--muted)}

/* ---------------- Forms ---------------- */
.fset{display:grid;gap:14px;margin-top:20px}
@media(min-width:560px){.fset--2{grid-template-columns:1fr 1fr}}
.f label{display:block;font-weight:600;font-size:.9rem;color:var(--ink);margin-bottom:6px}
.f input,.f select,.f textarea{
  width:100%;font-family:var(--f);font-size:1rem;color:var(--ink);
  padding:13px 15px;background:#fff;border:1px solid var(--line);border-radius:var(--r-field);
  transition:border-color .2s,box-shadow .2s;
}
.f textarea{min-height:106px;resize:vertical}
.f input::placeholder,.f textarea::placeholder{color:var(--muted)}
.f input:focus,.f select:focus,.f textarea:focus{
  outline:none;border-color:var(--hull);box-shadow:0 0 0 3px rgba(38,58,79,.15);
}
.form__msg{margin-top:10px;font-weight:600;min-height:1.3em;color:var(--ink)}
.form__msg.bad{color:#A3200F}
.form__note{margin-top:12px;font-size:.86rem;color:var(--muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------------- Trust strip ---------------- */
.trust{border-bottom:1px solid var(--line);background:#fff}
.trust ul{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;padding-block:22px;font-size:.9rem}
@media(min-width:860px){.trust ul{grid-template-columns:repeat(4,1fr)}}
.trust li{display:flex;align-items:center;gap:10px;color:var(--body);line-height:1.35}
.trust svg{width:17px;height:17px;color:var(--hull);flex:0 0 auto}

/* ---------------- Split rows: image + text ---------------- */
.split{display:grid;gap:clamp(26px,3.6vw,56px);align-items:center}
@media(min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .split--flip .split__fig{order:2}
}
.split__fig{margin:0}
.split__fig img{width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;border-radius:var(--r-img)}
.split__body p{margin-top:16px;max-width:52ch}
.split__body .btn,.split__body .ulink{margin-top:24px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.tags li{
  font-size:.87rem;font-weight:500;color:var(--ink);background:#fff;
  border:1px solid var(--line);padding:7px 15px;border-radius:var(--r-btn);
}
.mist .tags li{background:#fff}

/* ---------------- Promise list ---------------- */
.promise{display:grid;gap:clamp(26px,3.4vw,48px)}
@media(min-width:900px){.promise{grid-template-columns:1.1fr 1fr;align-items:start}}

/* ---------------- Work gallery ---------------- */
.gal{display:grid;gap:clamp(12px,1.3vw,18px);margin-top:clamp(30px,4vw,48px)}
@media(min-width:700px){.gal{grid-template-columns:repeat(4,1fr)}}
.shot{position:relative;overflow:hidden;margin:0;border-radius:var(--r-img);background:var(--mist)}
.shot img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;transition:transform 1.1s var(--out-expo)}
.shot:hover img{transform:scale(1.04)}
.shot figcaption{
  position:absolute;inset-inline:0;bottom:0;padding:30px 20px 18px;
  background:linear-gradient(to top,rgba(19,35,48,.92),rgba(19,35,48,0));
  color:#fff;font-weight:700;font-size:.98rem;letter-spacing:-.01em;
}
.shot figcaption span{display:block;font-weight:400;font-size:.85rem;color:#C3D0DB;margin-top:2px}
@media(min-width:700px){
  .shot--a{grid-column:span 2;grid-row:span 2}
  .shot--a img{aspect-ratio:1/1}
  .shot--b,.shot--e,.shot--f{grid-column:span 2}
  .shot--b img,.shot--e img,.shot--f img{aspect-ratio:16/10}
  .shot--c img,.shot--d img{aspect-ratio:1/1}
}
.gal__foot{margin-top:clamp(24px,3vw,36px);display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between}

/* ---------------- Sequence ---------------- */

/* ---------------- Icons ----------------
   Drawn inline on a 24 grid at stroke 1.75 to match the icons already in the
   markup. No icon dependency added. */
.ic{width:24px;height:24px;display:block}

/* ---------------- Selling point cards ----------------
   Three equal columns on desktop, two then one as space runs out. Deliberately
   flat-bordered rather than floating, so they read as a spec sheet and not as
   the generic icon-heading-text card grid. */
.pcards{
  display:grid;gap:clamp(14px,1.6vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
}
.pcard{
  display:flex;flex-direction:column;gap:14px;
  padding:clamp(24px,2.6vw,32px);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow-sm);
  transition:transform .4s var(--out),box-shadow .4s var(--out),border-color .4s var(--out);
}
.pcard__ic{
  display:grid;place-items:center;width:46px;height:46px;flex:0 0 auto;
  border-radius:12px;background:var(--hull);color:#fff;
  transition:transform .4s var(--out);
}
.pcard h3{font-size:var(--t-3);margin:0}
.pcard p{font-size:.97rem;color:var(--body);margin:0}
@media(hover:hover){
  .pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#C6D2DC}
  .pcard:hover .pcard__ic{transform:scale(1.06)}
}

/* ---------------- Four stages ----------------
   A numbered sequence, not a card grid. The rule running behind the row is the
   progress line; each card sits on it, so the order is readable at a glance. */
.stages{
  position:relative;display:grid;gap:clamp(14px,1.6vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  margin-top:clamp(34px,4.4vw,54px);counter-reset:stage;
}
@media(min-width:880px){
  /* the progress rail, drawn once behind the row */
  .stages::before{
    content:"";position:absolute;left:0;right:0;top:46px;height:2px;
    background:linear-gradient(to right,var(--line) 0%,var(--line) 100%);
    transform-origin:left center;
  }
}
.stage{
  position:relative;display:flex;flex-direction:column;gap:12px;
  padding:clamp(22px,2.4vw,28px);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  transition:transform .4s var(--out),box-shadow .4s var(--out),border-color .4s var(--out);
}
.stage__ic{
  display:grid;place-items:center;width:44px;height:44px;flex:0 0 auto;
  border-radius:50%;background:var(--hull);color:#fff;
  box-shadow:0 0 0 6px var(--mist);
  transition:transform .4s var(--out);
}
.stage__n{
  display:flex;align-items:center;gap:9px;margin:0;
  font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
}
.stage__n span{
  display:inline-grid;place-items:center;min-width:26px;height:20px;padding:0 6px;
  border-radius:99px;background:var(--mist);color:var(--hull);
  font-size:.72rem;letter-spacing:.04em;
}
.stage h3{font-size:var(--t-3);margin:0}
.stage__body{font-size:.95rem;color:var(--body);margin:0}
@media(hover:hover){
  .stage:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#C6D2DC}
  .stage:hover .stage__ic{transform:scale(1.06)}
}
@media(max-width:879px){
  /* Below the rail breakpoint the stages become a single vertical column, so
     the connector runs down the left and the reading order stays obvious. */
  .stages{gap:0;grid-template-columns:1fr}
  .stage{border:0;border-radius:0;padding:0 0 26px 54px;background:transparent}
  .stage::before{
    content:"";position:absolute;left:21px;top:44px;bottom:0;width:2px;background:var(--line);
  }
  .stage:last-child::before{display:none}
  .stage__ic{position:absolute;left:0;top:0}
  .stage:hover{transform:none;box-shadow:none}
}

.answer{
  margin-top:clamp(30px,4vw,46px);padding:clamp(22px,3vw,34px);
  background:var(--hull);color:var(--sea);border-radius:var(--r-card);
  display:grid;gap:18px;align-items:center;
}
@media(min-width:820px){.answer{grid-template-columns:1fr auto;gap:32px}}
.answer strong{color:#fff}
.answer p{max-width:62ch}
/* the answer panel is navy inside a light band, so its action inverts too */
.answer .btn--act{background:#fff;color:var(--hull);border-color:#fff}
.answer .btn--act:hover{background:var(--mist);border-color:var(--mist);color:var(--hull-deep)}

/* ---------------- Build note ---------------- */
.note{
  margin-top:clamp(22px,2.6vw,32px);padding:clamp(24px,3vw,36px);
  border:1.5px dashed var(--line);border-radius:var(--r-card);background:var(--mist);max-width:70ch;
}
.note b{display:block;color:var(--ink);font-weight:700;margin-bottom:8px}

/* ---------------- Contact band ---------------- */
.talk{display:grid;gap:clamp(30px,4vw,60px)}
@media(min-width:980px){.talk{grid-template-columns:.92fr 1.08fr}}
.talk__pts{margin-top:24px;display:flex;flex-direction:column;gap:13px}
.talk__pts li{display:flex;gap:12px;color:var(--body)}
.navy .talk__pts li{color:var(--sea)}
.talk__pts svg{width:16px;height:16px;color:var(--hull);flex:0 0 auto;margin-top:5px}
.navy .talk__pts svg{color:#fff}
.talk__tel{margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.navy .talk__tel{border-top-color:var(--hull-line)}
.talk__tel a{
  display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);
  font-size:clamp(1.45rem,3.2vw,1.95rem);font-weight:800;letter-spacing:-.03em;
}
.talk__tel a:hover{color:var(--hull)}
.navy .talk__tel a{color:#fff}
.navy .talk__tel a:hover{color:var(--sea)}
.talk__tel svg{width:22px;height:22px;color:var(--hull)}
.navy .talk__tel svg{color:#fff}

/* ---------------- Footer ---------------- */
.ftr{background:var(--hull-deep);color:var(--sea-dim);padding-top:clamp(44px,5.5vw,76px)}
.ftr__grid{display:grid;gap:clamp(26px,3.4vw,46px)}
@media(min-width:820px){.ftr__grid{grid-template-columns:1.4fr 1fr 1fr}}
.ftr img.mark{height:28px;width:auto}
.ftr h3{font-size:1rem;color:#fff;margin-bottom:14px}
.ftr a{color:var(--sea-dim);text-decoration:none;transition:color .2s}
.ftr a:hover{color:#fff}
.ftr li{margin-bottom:10px;font-size:.95rem}
.ftr__blurb{margin-top:18px;max-width:36ch}
.ftr__lic{margin-top:14px;color:#fff;font-weight:700;display:inline-flex;align-items:center;gap:9px}
.ftr__lic::before{content:"";width:9px;height:9px;border-radius:50%;background:#fff;flex:0 0 auto}
/* Social. O'Brien ship bare 20x30 glyphs, which is under the 44px tap target
   guideline, so these are circular buttons at a real touch size instead. */
.social{display:flex;gap:10px;margin-top:10px}
.social__label{
  margin-top:26px;font-size:.78rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:#fff;
}
.social a{
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:#fff;color:var(--hull-deep);border:1px solid #fff;
  transition:transform .25s var(--out),background .25s var(--out),color .25s var(--out);
}
.social a:hover{transform:translateY(-2px);background:var(--mist);color:var(--hull)}
.social a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.social svg{width:22px;height:22px}
.ftr__end{
  margin-top:clamp(34px,4.2vw,56px);padding-block:22px calc(22px + var(--dockpad,0px));
  border-top:1px solid var(--hull-line);display:flex;flex-wrap:wrap;gap:10px 26px;
  justify-content:space-between;font-size:.87rem;
}

/* ---------------- Mobile dock ---------------- */
.dock{position:fixed;inset-inline:0;bottom:0;z-index:var(--z-sticky);display:grid;grid-template-columns:1fr 1fr}
.dock a{display:flex;align-items:center;justify-content:center;gap:9px;padding:16px 8px;font-weight:700;text-decoration:none;font-size:.98rem}
.dock svg{width:16px;height:16px}
.dock .d-call{background:var(--hull-deep);color:#fff}
.dock .d-quote{background:#fff;color:var(--hull)}
@media(min-width:820px){.dock{display:none}}
@media(max-width:819px){:root{--dockpad:58px}}

/* =========================================================================
   MOTION

   Rules this follows:
   - Everything is visible by default. Animations use `backwards` fill, so a
     paused, blocked or never fired animation can never leave content blank.
   - Only transform and opacity are animated, so nothing reflows and CLS stays
     at zero.
   - Reveals are selective. Section-wide fade-on-scroll everywhere is the
     saturated default; here the reveal is spent on the two card groups, the
     gallery and the hero, which are the moments that earn it.
   - Stagger is driven by --i on each item, capped so a group never takes
     longer than ~400ms to finish arriving.
   ========================================================================= */
@media (prefers-reduced-motion:no-preference){
  @keyframes rise{from{opacity:0;transform:translateY(18px)}}
  @keyframes settle{from{opacity:0;transform:scale(1.04)}}
  @keyframes wipe{from{clip-path:inset(0 100% 0 0)}}
  @keyframes railIn{from{transform:scaleX(0)}}

  /* one orchestrated hero entrance, no observer involved */
  html.anim .hero__media img{animation:settle 1.5s var(--out-expo) backwards}
  html.anim .hero h1{animation:rise 1s var(--out) .08s backwards}
  html.anim .hero .lede{animation:rise 1s var(--out) .18s backwards}
  html.anim .hero__do{animation:rise 1s var(--out) .28s backwards}
  html.anim .hero .creds{animation:rise 1s var(--out) .36s backwards}
  html.anim .hero .card{animation:rise 1.05s var(--out) .22s backwards}

  /* groups stagger, driven by --i, capped at 4 steps */
  html.anim .reveal.seen{animation:rise .8s var(--out) backwards;
    animation-delay:calc(min(var(--i,0),4) * 70ms)}

  /* gallery images wipe rather than fade: it suits what they are */
  html.anim .gal .shot.seen{animation:rise .8s var(--out) backwards;
    animation-delay:calc(min(var(--i,0),5) * 65ms)}

  /* the progress rail draws itself once the stages arrive */
  @media(min-width:880px){
    html.anim .stages.seen::before{animation:railIn .9s var(--out-expo) .1s backwards}
  }

  /* slight parallax on the founder image, transform only */
  html.anim .split__fig img{will-change:transform}
}

/* Reduced motion: everything resolves instantly, nothing is hidden. */
@media (prefers-reduced-motion:reduce){
  html.anim *,html.anim *::before,html.anim *::after{
    animation-duration:.001ms!important;animation-delay:0ms!important;
    transition-duration:.001ms!important;
  }
}

/* ---------------- Interaction states ---------------- */
.btn:active{transform:translateY(1px) scale(.99)}
.btn:focus-visible,.ulink:focus-visible,.hdr__nav a:focus-visible,
.social a:focus-visible,.shot a:focus-visible{
  outline:2px solid var(--paint,var(--hull));outline-offset:3px;border-radius:4px;
}
.navy .btn:focus-visible,.hero .btn:focus-visible,.ftr a:focus-visible{
  outline-color:#fff;
}
.hdr__nav a{transition:color .25s var(--out),background-size .4s var(--out)}
.f input,.f select,.f textarea{transition:border-color .2s var(--out),box-shadow .2s var(--out),background .2s var(--out)}
.shot{transform:translateZ(0)}
/* consistent content width and rhythm */
.band > .shell + .shell{margin-top:clamp(38px,5vw,72px)}