/* TamamWorks — landing page. Navy + amber.
   Single stylesheet, no build step. Light-only by design: an ad landing page
   should look identical for every visitor, and a dark variant doubles the
   surface area for contrast bugs on the one element that matters (the CTA). */

:root{
  --navy-900:#0A1B33; --navy-800:#0E2544; --navy-700:#143257; --navy-600:#1B4272;
  --amber:#F5A524; --amber-600:#DE8F0C; --amber-100:#FEF3DC;
  --ink:#0F172A; --body:#475569; --muted:#64748B;
  --line:#E2E8F0; --surface:#F7F9FC; --white:#fff;
  --ok:#0E9F6E; --warn:#B42318;

  --wrap:1140px; --gut:1.5rem; --r:12px; --r-lg:18px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --shadow:0 1px 2px rgba(15,23,42,.06),0 8px 24px -8px rgba(15,23,42,.12);
  --shadow-lg:0 2px 4px rgba(15,23,42,.06),0 24px 48px -12px rgba(15,23,42,.22);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-size:1.0625rem;line-height:1.65;
     color:var(--body);background:var(--white);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy-600)}
h1,h2,h3,h4{color:var(--ink);line-height:1.15;letter-spacing:-.02em;margin:0 0 .5em;
            font-weight:750;overflow-wrap:break-word;text-wrap:balance}
h1{font-size:clamp(2.25rem,8.2vw,3.75rem);letter-spacing:-.035em;line-height:1.08}
h2{font-size:clamp(1.75rem,5.6vw,2.5rem)}
h3{font-size:1.1875rem;letter-spacing:-.01em;font-weight:700}
p{margin:0 0 1rem;text-wrap:pretty}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
section{padding-block:clamp(3rem,6vw,5.25rem)}
.sec-head{max-width:44rem;margin:0 auto clamp(2rem,4vw,3rem);text-align:center}
.sec-head p{font-size:1.0625rem;color:var(--muted);margin:0;text-wrap:pretty}


/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
     font:inherit;font-weight:700;font-size:1rem;line-height:1.2;text-decoration:none;
     padding:.875rem 1.375rem;border-radius:10px;border:1.5px solid transparent;
     cursor:pointer;transition:background .15s,border-color .15s,transform .06s}
.btn:active{transform:translateY(1px)}
/* Amber needs dark text: white on #F5A524 is 2.1:1 and fails WCAG outright. */
.btn-cta{background:var(--amber);color:var(--navy-900);border-color:var(--amber)}
.btn-cta:hover{background:var(--amber-600);border-color:var(--amber-600)}
.btn-wa{background:#25D366;color:#04301A;border-color:#25D366}
.btn-wa:hover{background:#1FBA57;border-color:#1FBA57}
.btn-ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.35)}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}
.btn-out{background:var(--white);color:var(--navy-700);border-color:var(--line)}
.btn-out:hover{border-color:var(--navy-600)}
.btn-lg{padding:1.0625rem 1.75rem;font-size:1.0625rem}
.btn-block{width:100%}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:var(--navy-900);
     border-bottom:1px solid rgba(255,255,255,.08)}
.hdr-in{display:flex;align-items:center;gap:1rem;min-height:68px}
.logo{display:flex;align-items:center;gap:.625rem;text-decoration:none;flex:0 1 auto;min-width:0}
.logo-mk{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:var(--amber);
         display:grid;place-items:center}
.logo-mk svg{width:22px;height:22px;color:var(--navy-900)}
.logo-wm{font-weight:750;font-size:1.1875rem;letter-spacing:-.025em;color:var(--white);
         white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logo-wm b{color:var(--amber);font-weight:750}
.hdr-end{flex:0 0 auto;margin-left:auto;display:flex;align-items:center;gap:.625rem}
/* Desktop leads with the form, not the number: the header CTA should feed the
   one conversion we can measure end to end. Calling is still one tap away on
   phones via the icon button, and the number stays in the hero and footer. */
.hdr-cta{display:none;padding:.625rem 1.125rem;font-size:.9375rem;white-space:nowrap}
.hdr-btn{padding:.625rem 1.125rem;font-size:.9375rem}
/* Phones get two icon-only actions, Call and WhatsApp, so the brand wordmark
   keeps its space at every width. Both glyphs read universally and the
   aria-labels carry the names for screen readers. From 640px there is room
   for the number in full and a labelled WhatsApp button. */
.hdr-ico{width:40px;height:40px;padding:0;flex:0 0 auto}
.hdr-btn-t{display:none}
.hdr-btn{padding-inline:.75rem}
@media(max-width:479px){.logo-wm{font-size:1rem}}
@media(min-width:640px){
  .hdr-ico{display:none}
  .hdr-cta{display:inline-flex}
  .hdr-btn-t{display:inline}
  .hdr-btn{padding-inline:1.125rem}
}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--navy-900);
      color:rgba(255,255,255,.84);text-align:center;
      padding-block:clamp(3.25rem,8vw,6.5rem)}

/* PHONES: the photograph is a full-bleed wash behind centred copy. Two stacked
   overlay layers mean headline contrast never depends on what the photo
   happens to be doing behind it. */
.hero-shot{position:absolute;inset:0;z-index:0;margin:0}
.hero-shot img{width:100%;height:100%;object-fit:cover;opacity:.45}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,27,51,.6),rgba(10,27,51,.86)),
             radial-gradient(900px 400px at 50% -12%,rgba(245,165,36,.2),transparent 66%)}
.hero-in{max-width:52rem;margin-inline:auto}
.hero-copy{position:relative;z-index:2}
.hero h1{color:var(--white)}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero-sub{font-size:clamp(1.0625rem,1.6vw,1.1875rem);max-width:37rem;margin:0 auto 1.875rem}
/* width:max-content sizes the block to its longest row, so centring it puts
   the group on the true optical centre. A fixed max-width leaves slack on the
   right and the whole block reads as sitting left of centre. Rows stay
   left-aligned so the ticks share one edge. */
.hero-pts{display:grid;gap:.75rem;margin:0 auto 2rem;width:max-content;
          max-width:100%;text-align:left}
.hero-pts li{display:flex;gap:.625rem;align-items:flex-start;color:var(--white);
             font-weight:600;font-size:1rem}
.hero-pts svg{flex:0 0 auto;width:21px;height:21px;margin-top:.15rem;color:var(--amber)}
.hero-acts{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}

/* DESKTOP: a centred 832px column stranded 300px from each edge of a 1440
   screen reads as underfilled, and a dimmed background photo reads as flat
   navy. From 1000px the photograph becomes a real framed image in its own
   column and the copy goes left-aligned, so the hero fills the width the way
   every other section already does. */
@media(min-width:1000px){
  .hero{text-align:left;display:grid;align-content:center;min-height:76vh}
  .hero::after{background:radial-gradient(760px 420px at 88% 12%,
               rgba(245,165,36,.17),transparent 68%)}
  .hero-in{max-width:var(--wrap);display:grid;grid-template-columns:1.02fr .98fr;
           gap:clamp(2.5rem,4vw,4rem);align-items:center;
           position:relative;z-index:2}
  .hero-shot{position:static;z-index:auto}
  .hero-shot img{height:auto;aspect-ratio:4/3;opacity:1;border-radius:var(--r-lg);
                 box-shadow:0 24px 60px -18px rgba(0,0,0,.6)}
  .hero-sub{margin-inline:0}
  .hero-pts{margin-inline:0;max-width:none}
  .hero-acts{justify-content:flex-start}
}

/* ---------- form card ---------- */
.card{background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden}
.card-top{background:var(--surface);padding:1.25rem 1.5rem;border-bottom:1px solid var(--line)}
.card-top h2{font-size:1.3125rem;margin:0 0 .25rem}
.card-top p{margin:0;font-size:.9375rem;color:var(--muted)}
.card-body{padding:1.5rem}
.fld{margin-bottom:1rem}
.fld label{display:block;font-size:.875rem;font-weight:650;color:var(--ink);margin-bottom:.375rem}
.fld .req{color:var(--warn)}
.inp,.sel,.txa{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--white);
  border:1.5px solid var(--line);border-radius:10px;padding:.75rem .875rem;
  transition:border-color .15s,box-shadow .15s}
.inp:focus,.sel:focus,.txa:focus{outline:none;border-color:var(--navy-600);
  box-shadow:0 0 0 3px rgba(27,66,114,.15)}
.txa{min-height:88px;resize:vertical}
/* Native select arrow overlaps long option text; reserve space and draw our own. */
.sel{appearance:none;-webkit-appearance:none;padding-inline-end:2.5rem;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .875rem center;background-size:18px}
.row2{display:grid;gap:1rem}
@media(min-width:520px){.row2{grid-template-columns:1fr 1fr}}
.phone-grp{display:flex;gap:.5rem}
.phone-grp .sel{flex:0 0 7.5rem}
.phone-grp .inp{flex:1 1 auto;min-width:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.card-note{font-size:.8125rem;color:var(--muted);text-align:center;margin:.875rem 0 0}
.err{display:none;font-size:.8125rem;color:var(--warn);font-weight:600;margin-top:.375rem}
.fld.is-bad .inp,.fld.is-bad .sel{border-color:var(--warn)}
.fld.is-bad .err{display:block}
.formmsg{background:var(--amber-100);border:1.5px solid var(--amber);border-radius:10px;
         padding:.875rem 1rem;margin-bottom:1.25rem;font-size:.9375rem;color:var(--ink)}

/* ---------- reviews ---------- */
#reviews{background:var(--white)}
.rev-grid{display:grid;gap:1rem}
@media(min-width:760px){.rev-grid{grid-template-columns:repeat(3,1fr)}}
.rev{margin:0;display:flex;flex-direction:column;gap:.875rem;
     background:var(--white);border:1.5px solid var(--line);
     border-radius:var(--r);padding:1.375rem;align-items:center;text-align:center}
.rev-top{display:flex;align-items:center;gap:.75rem;flex-direction:column}
.rev-av{flex:0 0 auto;width:2.75rem;height:2.75rem;border-radius:50%;
        background:var(--amber-100);color:var(--amber-600);
        display:grid;place-items:center;font-weight:800;font-size:.9375rem}
.rev-id{display:flex;flex-direction:column;gap:.125rem;min-width:0;max-width:100%}
.rev-name{font-weight:700;font-size:.9375rem;line-height:1.3;color:var(--ink)}
.rev-src{display:flex;align-items:center;justify-content:center;gap:.375rem;
         font-size:.75rem;color:var(--muted)}
.g-mark{width:.875rem;height:.875rem;flex:0 0 auto}
.stars{display:flex;gap:.0625rem;color:var(--amber)}
.stars svg{width:.9375rem;height:.9375rem}
/* Quote body stays left-aligned: a centred three-sentence block is hard to
   scan and its ragged left edge reads as broken rather than deliberate. */
.rev blockquote{margin:0;font-size:.9375rem;line-height:1.6;color:var(--body);
                text-align:left;text-wrap:pretty}
.rev-meta{margin-top:auto;padding-top:.75rem;border-top:1px solid var(--line);
          width:100%;font-size:.75rem;color:var(--muted);
          display:flex;gap:.75rem;align-items:baseline;justify-content:center}
.rev-date{margin-inline-start:auto;flex:0 0 auto;white-space:nowrap}
.rev-date:empty{display:none}
@media(min-width:760px){.rev-meta{justify-content:flex-start}}
@media(min-width:760px){
  .rev,.rev-top{align-items:flex-start}
  .rev{text-align:left}
  .rev-top{flex-direction:row}
  .rev-src{justify-content:flex-start}
}

/* ---------- quote section (form, mid-page) ---------- */
.quote-sec{background:var(--surface)}
/* One column on phones, where the card fills the width fine. Two from 900px,
   because a 36rem card centred in a 1140px container reads as an oversight. */
.quote-in{display:grid;gap:clamp(2rem,4vw,3.25rem);align-items:start}
@media(min-width:900px){.quote-in{grid-template-columns:1fr 1fr;align-items:center}}
.quote-aside{text-align:center;max-width:34rem;margin-inline:auto}
.quote-aside h2{margin-bottom:.5rem}
.quote-aside > p{color:var(--muted);margin-bottom:1.5rem}
.quote-pts{display:grid;gap:1rem;text-align:left;max-width:24rem;
           margin:0 auto 1.5rem}
.quote-pts li{display:flex;gap:.75rem;align-items:flex-start;font-size:.9375rem;
              text-wrap:pretty}
.quote-pts svg{flex:0 0 auto;width:20px;height:20px;color:var(--amber-600);margin-top:.15rem}
.quote-pts b{color:var(--ink);font-weight:650}
.quote-alt{font-size:.9375rem;color:var(--muted);margin:0}
.quote-alt a{color:var(--navy-600);font-weight:650}
.quote-sec .card{max-width:36rem;margin-inline:auto;width:100%}
@media(min-width:900px){
  .quote-aside{text-align:left;margin-inline:0}
  .quote-pts{margin-inline:0;max-width:none}
  .quote-sec .card{margin-inline:0}
}

/* ---------- photography ---------- */
.shot-fig{margin:0}
.shot-fig img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
              border-radius:var(--r-lg)}
@media(min-width:760px){.shot-fig img{aspect-ratio:16/9}}
.shot-fig figcaption{margin-top:.875rem;text-align:center;font-size:.9375rem;
                     color:var(--muted)}

/* ---------- trust strip ---------- */
.trust{background:var(--navy-800);padding-block:1.5rem;
       border-bottom:1px solid rgba(255,255,255,.07)}
/* Single column: centre the BLOCK and left-align the rows, so all four icons
   share one edge. Centring each row independently makes them ragged. */
/* Two up, two rows on phones. At ~160px a column there is no room for an icon
   beside the text as well, so the icon sits above it and the text gets the
   full width. From 560px the icon returns to the left of the copy. */
.trust ul{display:grid;gap:1.25rem .75rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:860px){.trust ul{grid-template-columns:repeat(4,1fr);gap:1.25rem}}
.trust li{display:flex;flex-direction:column;align-items:center;gap:.5rem;
          text-align:center}
@media(min-width:560px){
  .trust li{flex-direction:row;align-items:flex-start;gap:.75rem;
            text-align:left;justify-content:center}
}
.trust svg{flex:0 0 auto;width:24px;height:24px;color:var(--amber);margin-top:.1rem}
.trust-t{display:block;color:var(--white);font-weight:700;font-size:.9375rem;line-height:1.35}
.trust-s{display:block;color:rgba(255,255,255,.62);font-size:.75rem;line-height:1.4;margin-top:.125rem}
@media(min-width:560px){.trust-s{font-size:.8125rem}}

/* ---------- generic card grids ---------- */
.grid{display:grid;gap:1rem}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
@media(min-width:640px){.g2,.g3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.g3{grid-template-columns:repeat(3,1fr)}}

.tile{background:var(--white);border:1.5px solid var(--line);border-radius:var(--r);
      padding:1.5rem 1.375rem;text-align:center;
      transition:border-color .15s,box-shadow .15s}
.tile:hover{border-color:var(--navy-600);box-shadow:var(--shadow)}
.tile h3{margin-bottom:.375rem}
.tile p{margin:0;font-size:.9375rem;color:var(--muted)}
.ico{width:42px;height:42px;border-radius:10px;background:var(--amber-100);
     display:grid;place-items:center;margin:0 auto .875rem}
.ico svg{width:22px;height:22px;color:var(--amber-600)}

/* services — keyword surface, now with an icon and a line of copy each.
   Flex-wrap rather than a fixed grid: ten items into three columns leaves a
   lone orphan on the last row, and centred wrapping hides that. */
/* Ten services: two across on phones (five rows), five across on desktop
   (two rows). A fixed grid rather than flex-wrap, so the count per row is
   exact instead of whatever the copy happens to allow. */
.svc{display:grid;gap:.625rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.svc{gap:.875rem;grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.svc{gap:.875rem;grid-template-columns:repeat(5,1fr)}}
.svc li{background:var(--white);border:1.5px solid var(--line);border-radius:var(--r);
        padding:1.125rem .875rem;text-align:center;
        transition:border-color .15s,box-shadow .15s}
.svc li:hover{border-color:var(--navy-600);box-shadow:var(--shadow)}
.svc-ico{width:38px;height:38px;border-radius:10px;background:var(--amber-100);
         display:grid;place-items:center;margin:0 auto .625rem}
.svc-ico svg{width:20px;height:20px;color:var(--amber-600)}
.svc li h3{margin-bottom:.25rem;font-size:.9375rem;line-height:1.3}
.svc li p{margin:0;font-size:.75rem;line-height:1.45;color:var(--muted);font-weight:400}
@media(min-width:640px){
  .svc li{padding:1.375rem 1rem}
  .svc-ico{width:42px;height:42px}
  .svc-ico svg{width:22px;height:22px}
  .svc li h3{font-size:1rem}
  .svc li p{font-size:.8125rem}
}

/* problems we fix — pills, not cards.
   Three words in a full-width card leaves a lane of dead space either side,
   which centring only draws attention to. Auto-width pills that wrap and
   centre size themselves to the label instead. */
.probs{display:flex;flex-wrap:wrap;gap:.625rem;justify-content:center}
.probs li{display:inline-flex;gap:.4375rem;align-items:center;flex:0 1 auto;white-space:nowrap;
          background:var(--white);border:1.5px solid var(--line);border-radius:999px;
          padding:.5625rem .8125rem;font-size:.875rem;color:var(--ink);font-weight:600}
@media(min-width:560px){
  .probs li{gap:.5rem;padding:.6875rem 1.125rem;font-size:.9375rem}
}
.probs svg{flex:0 0 auto;width:16px;height:16px;color:var(--amber-600);margin-top:0}
@media(min-width:560px){.probs svg{width:18px;height:18px}}

/* included / not included */
.cols{display:grid;gap:1.25rem}
@media(min-width:820px){.cols{grid-template-columns:1fr 1fr}}
.col{border:1.5px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--white)}
.col-h{padding:1rem 1.25rem;font-weight:750;color:var(--ink);font-size:1.0625rem;
       border-bottom:1.5px solid var(--line);background:var(--surface);text-align:center}
/* Block centred, rows left: a wrapped bullet centred under its own tick
   reads as a mistake, and the ticks stop lining up. */
.col ul{padding:1.125rem 1.25rem;max-width:27rem;margin-inline:auto}
.col li{display:flex;gap:.625rem;align-items:flex-start;padding-block:.5rem;font-size:.9375rem;text-wrap:pretty}
.col li svg{flex:0 0 auto;width:19px;height:19px;margin-top:.2rem}
.col-yes li svg{color:var(--ok)}
.col-no li svg{color:var(--muted)}
.col li b{color:var(--ink);font-weight:650}

/* process */
.steps{display:grid;gap:1.25rem;counter-reset:s}
@media(min-width:760px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{counter-increment:s;text-align:center}
.step::before{content:counter(s);width:2.5rem;height:2.5rem;margin:0 auto .875rem;
  border-radius:50%;background:var(--navy-900);color:var(--amber);font-weight:800;
  display:grid;place-items:center;font-size:1.0625rem}
.step h3{margin-bottom:.375rem}
.step p{margin:0;font-size:.9375rem;color:var(--muted)}

/* areas — keyword surface */
.areas{display:flex;flex-wrap:wrap;gap:.4375rem;justify-content:center}
.areas li{background:var(--white);border:1.5px solid var(--line);border-radius:999px;
          padding:.4375rem .75rem;font-size:.8125rem;font-weight:600;color:var(--navy-700);
          white-space:nowrap}
@media(min-width:560px){.areas li{padding:.5rem 1rem;font-size:.875rem}}

/* guarantees — replaces testimonials for a new business */
.gtee{background:var(--navy-900);color:rgba(255,255,255,.78)}
.gtee h2,.gtee h3{color:var(--white)}
.gtee .sec-head p{color:rgba(255,255,255,.66)}
.gtee .tile{background:var(--navy-800);border-color:rgba(255,255,255,.12)}
.gtee .tile:hover{border-color:var(--amber);box-shadow:none}
.gtee .tile p{color:rgba(255,255,255,.68)}
.gtee .ico{background:rgba(245,165,36,.16)}
.gtee .ico svg{color:var(--amber)}

/* CTA band */
.band{background:var(--amber);color:var(--navy-900);text-align:center}
.band h2{color:var(--navy-900);margin-bottom:.5rem}
.band p{max-width:38rem;margin:0 auto 1.75rem;color:rgba(10,27,51,.78);font-size:1.0625rem}
.band-acts{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}
.band .btn-cta{background:var(--navy-900);color:var(--white);border-color:var(--navy-900)}
.band .btn-cta:hover{background:var(--navy-800);border-color:var(--navy-800)}
.band .btn-out{background:transparent;border-color:rgba(10,27,51,.3);color:var(--navy-900)}
.band .btn-out:hover{border-color:var(--navy-900);background:rgba(255,255,255,.28)}

/* FAQ */
.faq{max-width:50rem;margin-inline:auto}
.faq details{border:1.5px solid var(--line);border-radius:var(--r);margin-bottom:.75rem;
             background:var(--white);overflow:hidden}
.faq details[open]{border-color:var(--navy-600)}
.faq summary{padding:1.0625rem 3rem 1.0625rem 1.25rem;font-weight:700;color:var(--ink);
  cursor:pointer;list-style:none;position:relative;font-size:1rem;line-height:1.45}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:1.25rem;top:1.4rem;width:11px;height:11px;
  border-right:2.5px solid var(--muted);border-bottom:2.5px solid var(--muted);
  transform:rotate(45deg);transition:transform .18s}
.faq details[open] summary::after{transform:rotate(-135deg);top:1.55rem}
.faq .ans{padding:0 1.25rem 1.125rem;font-size:.9375rem;color:var(--body);text-wrap:pretty}
.faq .ans p:last-child{margin:0}

/* SEO prose block, paired with a photo so it is not four paragraphs alone.
   The photo leads on phones - opening a section with a wall of body copy is
   what made it read as filler - and sits sticky beside the text on desktop so
   it stays in view for the whole scroll rather than scrolling away at once. */
.about-in{display:grid;gap:clamp(1.75rem,3.5vw,3rem)}
.about-shot{margin:0;order:-1}
.about-shot img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
                border-radius:var(--r-lg)}
@media(min-width:940px){
  .about-in{grid-template-columns:1.15fr .85fr;align-items:start}
  .about-shot{order:0;position:sticky;top:5.5rem}
  .about-shot img{aspect-ratio:4/5}
  .prose{max-width:none}
}
.prose{max-width:46rem;margin-inline:auto;font-size:.9375rem;color:var(--muted);text-wrap:pretty}
/* Centred on phones, matching every other section. Centring the headings but
   not the copy read worse than either choice on its own. Left-aligned from
   940px, where the two-column layout makes it the right call. */
.prose{text-align:center}
.prose h3{font-size:1.0625rem;margin:1.75rem 0 .5rem;
          display:flex;align-items:center;gap:.5rem;justify-content:center}
.prose-ico{width:18px;height:18px;flex:0 0 auto;color:var(--amber-600)}
@media(min-width:940px){.prose h3{justify-content:flex-start}}
.prose h3:first-child{margin-top:0}
@media(min-width:940px){.prose{text-align:left}}

/* footer */
.ftr{background:var(--navy-900);color:rgba(255,255,255,.6);padding-block:2.75rem 1.5rem;font-size:.9375rem}
.ftr-top{display:grid;gap:1.75rem;padding-bottom:1.75rem;text-align:center;
         border-bottom:1px solid rgba(255,255,255,.1)}
.ftr-top .logo{justify-content:center}
.ftr-top p{margin-inline:auto}
@media(min-width:760px){
  .ftr-top{grid-template-columns:1.4fr 1fr 1fr;text-align:left}
  .ftr-top .logo{justify-content:flex-start}
  .ftr-top p{margin-inline:0}
}
.ftr-bot{justify-content:center}
@media(min-width:760px){.ftr-bot{justify-content:space-between}}
.ftr h4{color:var(--white);font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;
        margin:0 0 .875rem;font-weight:700}
.ftr a{color:rgba(255,255,255,.72);text-decoration:none}
.ftr a:hover{color:var(--amber)}
.ftr li{padding-block:.3125rem}
.ftr-bot{padding-top:1.25rem;font-size:.8125rem;display:flex;flex-wrap:wrap;gap:.75rem;
         justify-content:space-between;color:rgba(255,255,255,.45)}
.ftr .logo-wm{font-size:1.0625rem}

/* floating + sticky */
.wa-float{position:fixed;right:.875rem;bottom:1rem;z-index:60;width:48px;height:48px;
  border-radius:50%;background:#25D366;display:grid;place-items:center;
  box-shadow:0 6px 20px rgba(0,0,0,.28)}
.wa-float svg{width:26px;height:26px;color:#fff}
@media(min-width:960px){
  .wa-float{right:1.5rem;bottom:1.5rem;width:54px;height:54px}
  .wa-float svg{width:29px;height:29px}
}
/* No sticky bottom bar. The float is the only fixed element, so it sits at
   the same offset on every breakpoint and the body needs no bottom padding. */

/* ============================================================
   MOTION
   Only opacity and transform are animated: both run on the
   compositor, neither triggers layout, so CLS stays at zero.
   The hero is deliberately excluded - it holds the LCP element,
   and fading it in delays the metric that feeds Quality Score.
   ============================================================ */
:root{
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease:cubic-bezier(.4,0,.2,1);
  --t-fast:.18s;
  --t-mid:.32s;
  --t-reveal:.62s;
}

/* ---- scroll reveal ----
   Visibility must never depend on a JS callback firing. The base rule already
   carries the reveal animation on a 4s delay, so every element becomes visible
   on its own no matter what happens to the observer. IntersectionObserver only
   zeroes that delay when the element scrolls into view, turning a guaranteed
   fallback into a timed effect. Worst case is an unanimated page, never a
   blank one. */
.motion .reveal{opacity:0;transform:translate3d(0,18px,0);
  animation:rise var(--t-reveal) var(--ease-out) 4s forwards}
.motion .reveal.in{animation-delay:0s}
/* Children stagger so a grid resolves in sequence rather than as one slab. */
.motion .reveal.in > *{animation:rise var(--t-reveal) var(--ease-out) backwards}
.motion .svc.in > *,.motion .grid.in > *,.motion .rev-grid.in > *,
.motion .steps.in > *,.motion .areas.in > *,.motion .probs.in > *{
  animation:rise var(--t-reveal) var(--ease-out) backwards}
.motion .in > *:nth-child(1){animation-delay:.02s}
.motion .in > *:nth-child(2){animation-delay:.06s}
.motion .in > *:nth-child(3){animation-delay:.10s}
.motion .in > *:nth-child(4){animation-delay:.14s}
.motion .in > *:nth-child(5){animation-delay:.18s}
.motion .in > *:nth-child(6){animation-delay:.22s}
.motion .in > *:nth-child(n+7){animation-delay:.26s}
@keyframes rise{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}

/* ---- buttons ---- */
.btn{transition:background var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                transform var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn-cta:hover{box-shadow:0 8px 22px -8px rgba(245,165,36,.75)}
.btn-wa:hover{box-shadow:0 8px 22px -8px rgba(37,211,102,.7)}
.btn:active{transform:translateY(1px);transition-duration:.06s}
.btn svg{transition:transform var(--t-mid) var(--ease-out)}
.btn:hover svg{transform:scale(1.12)}

/* ---- cards ---- */
.svc li,.tile,.rev,.col{
  transition:transform var(--t-mid) var(--ease-out),
             box-shadow var(--t-mid) var(--ease-out),
             border-color var(--t-fast) var(--ease)}
.svc li:hover,.tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.rev:hover{transform:translateY(-2px);box-shadow:var(--shadow)}

/* ---- icons ---- */
.svc-ico,.ico{transition:transform var(--t-mid) var(--ease-out),
                         background var(--t-mid) var(--ease)}
.svc li:hover .svc-ico,.tile:hover .ico{transform:scale(1.1) rotate(-4deg)}
.svc-ico svg,.ico svg{transition:transform var(--t-mid) var(--ease-out)}
.svc li:hover .svc-ico svg{transform:rotate(4deg)}
.logo-mk{transition:transform var(--t-mid) var(--ease-out)}
.logo:hover .logo-mk{transform:rotate(-6deg) scale(1.05)}
.wa-float{transition:transform var(--t-mid) var(--ease-out),
                     box-shadow var(--t-mid) var(--ease-out)}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{transition:transform var(--t-mid) var(--ease-out)}
.wa-float:hover svg{transform:rotate(8deg)}

/* ---- area chips ---- */
.areas li{transition:transform var(--t-fast) var(--ease),
                     border-color var(--t-fast) var(--ease),
                     background var(--t-fast) var(--ease),
                     color var(--t-fast) var(--ease)}
.areas li:hover{transform:translateY(-2px);border-color:var(--amber);
                background:var(--amber-100);color:var(--navy-900)}

/* ---- process steps ---- */
.step::before{transition:transform var(--t-mid) var(--ease-out),
                         background var(--t-mid) var(--ease)}
.step:hover::before{transform:scale(1.1);background:var(--amber);color:var(--navy-900)}

/* ---- faq ---- */
.faq details{transition:border-color var(--t-fast) var(--ease),
                        box-shadow var(--t-fast) var(--ease)}
.faq details:hover{border-color:var(--navy-600)}
.faq details[open]{box-shadow:var(--shadow)}
.faq summary{transition:color var(--t-fast) var(--ease)}
.faq summary:hover{color:var(--navy-600)}
.faq details[open] .ans{animation:rise var(--t-mid) var(--ease-out)}

/* ---- form ---- */
.inp,.sel,.txa{transition:border-color var(--t-fast) var(--ease),
                          box-shadow var(--t-fast) var(--ease)}
.btn[disabled]{opacity:.72;cursor:progress;transform:none}
.btn[disabled]::after{content:"";width:1em;height:1em;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;
  animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- images fade in once decoded, so no half-painted photo ---- */
.motion .hero-shot img,.motion .about-shot img{opacity:0;
  transition:opacity .5s var(--ease)}
.motion .hero-shot img.ready,.motion .about-shot img.ready{opacity:1}
@media(min-width:1000px){.motion .hero-shot img{opacity:1}}

/* ---- footer links ---- */
.ftr a{transition:color var(--t-fast) var(--ease)}

/* ============================================================
   Anyone who has asked their OS to reduce motion gets none of
   it. Not decoration: vestibular disorders make parallax and
   large transforms genuinely unpleasant.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .motion .reveal,.motion .reveal.in,.motion .in > *{
    opacity:1 !important;transform:none !important;animation:none !important}
  .motion .hero-shot img,.motion .about-shot img{opacity:1 !important}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ---------- inline confirmation ----------
   Hidden by default. :target shows it with JavaScript off, .show when JS is
   present; both selectors so the no-JS path is never a dead end. */
.done{display:none}
/* Centred column at every width, and it replaces the form rather than
   stacking above it. */
.done:target,.done.show{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:.875rem;position:relative;
  background:var(--amber-100);border:1.5px solid var(--amber);
  border-radius:var(--r);padding:clamp(1.75rem,5vw,2.5rem) 1.25rem;
  animation:rise .4s var(--ease-out)}
.card-body.sent .card-fields{display:none}
/* Same for the no-JS path: if :target is showing the panel, the fields must
   go too, or the visitor gets a confirmation stacked on a live form. */
.card-body:has(.done:target) .card-fields{display:none}
.done-mark{flex:0 0 auto;width:52px;height:52px;border-radius:50%;
  background:var(--amber);color:var(--navy-900);display:grid;place-items:center}
.done-mark svg{width:28px;height:28px}
.done strong{display:block;color:var(--ink);font-size:1.1875rem;line-height:1.25}
.done p{margin:0;font-size:.9375rem;color:var(--body);max-width:24rem;
        text-wrap:pretty}
.done a{color:var(--navy-700);font-weight:650}
.done-close{margin-top:.25rem;background:var(--white)}
.done-x{position:absolute;top:.5rem;right:.5rem;width:28px;height:28px;
  display:grid;place-items:center;border:0;border-radius:8px;cursor:pointer;
  background:transparent;color:var(--muted);
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.done-x:hover{background:rgba(10,27,51,.08);color:var(--ink)}