/* ===========================================================================
   Lonsdale Marketing - stylesheet
   One file, all four pages. Edit here and every page updates.

   WHERE THINGS LIVE  (search for the section name in quotes)

     Brand colours and fonts .......... ":root"  - right below this
     Nav bar .......................... "nav"
     Sub-page headers, services/work .. "sub-page masthead"
     Service detail rows .............. "service detail rows"
     Case study cards ................. "case studies"
     Footer ........................... "footer"
     Home hero, map, blocks, form ..... "HOME PAGE ONLY"
     Phone and tablet layout .......... "responsive"  - at the bottom

   Colours are declared once in :root and used everywhere as var(--gold),
   var(--navy) and so on. Change one here and it updates across the site.

   Note for editing: CSS comments cannot be nested. Never put a slash-star
   inside another comment block or everything after it stops working.
   =========================================================================== */

:root{
  --ink:#0A0D24; --navy:#12173F; --navy-lift:#1A2050;
  --gold:#C5A253; --gold-lit:#E3C888; --cream:#F7F4ED; --slate:#868CA6;
  --rule:rgba(197,162,83,.22);
  --display:'Cinzel',Georgia,serif;
  --body:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --gut:clamp(20px,5vw,64px); --maxw:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--navy);color:var(--cream);font-family:var(--body);
  font-weight:300;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold-lit);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--navy);
  padding:12px 20px;font-family:var(--mono);font-size:12px;z-index:99}
.skip:focus{left:0}

.eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:14px;margin:0 0 22px}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--rule);max-width:120px}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.12;margin:0;letter-spacing:.01em}
h2{font-size:clamp(30px,4.4vw,50px)}
h3{font-size:20px;letter-spacing:.02em}
p{margin:0 0 1.1em}
.lede{font-size:clamp(17px,1.8vw,20px);color:#C9CEE2;font-weight:300;max-width:54ch}
.muted{color:var(--slate)}
.gold{color:var(--gold)}

/* nav */
.nav{position:sticky;top:0;z-index:60;background:rgba(18,23,63,.78);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.nav.stuck{border-bottom-color:var(--rule);background:rgba(10,13,36,.92)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:82px}
.brand{display:flex;align-items:center;gap:14px}
.brand img{height:42px;width:auto}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-name{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:.20em}
.brand-sub{font-family:var(--mono);font-size:9px;letter-spacing:.36em;color:var(--gold);margin-top:6px}
.nav-links{display:flex;align-items:center;gap:34px}
.nav-links a{font-size:14px;color:#BFC4D8;letter-spacing:.03em;position:relative;padding:6px 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold);transition:width .28s ease}
.nav-links a:hover{color:var(--cream)}
.nav-links a:hover::after{width:100%}
.nav-links a[aria-current="page"]{color:var(--cream)}
.nav-links a[aria-current="page"]::after{width:100%;background:var(--gold)}
.nav-links a.btn::after{display:none}
.btn{display:inline-block;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;padding:14px 26px;border:1px solid var(--gold);color:var(--navy);
  background:var(--gold);transition:background .25s,color .25s,transform .25s;cursor:pointer}
.btn:hover{background:var(--gold-lit);border-color:var(--gold-lit);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--gold)}
.btn-ghost:hover{background:rgba(197,162,83,.12);color:var(--gold-lit)}
.nav-toggle{display:none;background:none;border:1px solid var(--rule);color:var(--gold);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;padding:10px 14px;cursor:pointer}

/* sections */
.sec{padding:clamp(64px,9vw,118px) 0;position:relative}
.sec-alt{background:var(--ink)}
.sec-head{max-width:60ch;margin-bottom:clamp(36px,5vw,58px)}

/* sub-page masthead: one fragment of the grid, not the whole map */
.masthead{padding:clamp(50px,7vw,86px) 0 clamp(38px,5vw,58px);position:relative;overflow:hidden}
.masthead::before{content:"";position:absolute;inset:0;
  background:radial-gradient(110% 80% at 80% 10%,rgba(197,162,83,.10),transparent 60%);pointer-events:none}
.masthead h1{font-size:clamp(38px,5.6vw,66px);margin-bottom:22px;position:relative}
.masthead .lede{position:relative}
.gridstrip{position:absolute;right:calc(var(--gut) * -1);top:0;height:100%;width:44%;opacity:.5;pointer-events:none}
.gridstrip svg{height:100%;width:100%}

/* buttons row */
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

/* jump list */
.jump{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.jump a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);padding:16px 22px 16px 0;margin-right:22px;transition:color .25s}
.jump a:hover{color:var(--gold-lit)}
.jump a span{color:var(--gold);margin-right:9px}

/* service detail rows */
.svc{display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(24px,4vw,64px);
  padding:clamp(46px,6vw,80px) 0;border-bottom:1px solid var(--rule);align-items:start}
.svc:last-child{border-bottom:0}
.svc-side{position:sticky;top:110px}
.svc-tag{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:16px}
.svc-side h2{font-size:clamp(26px,3.2vw,38px);margin-bottom:18px}
.svc-side .meta{font-family:var(--mono);font-size:11px;letter-spacing:.09em;color:var(--slate);line-height:2.1}
.svc-side .meta b{color:var(--gold-lit);font-weight:500}
.svc-body p{color:#C1C7DC;font-size:16px}
.svc-body p:first-child{color:#D8DCEA;font-size:17.5px}

.deliver{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--rule)}
.deliver li{padding:13px 0 13px 30px;border-bottom:1px solid var(--rule);position:relative;
  font-size:15px;color:#C1C7DC}
.deliver li::before{content:"";position:absolute;left:2px;top:22px;width:12px;height:1px;background:var(--gold)}

.measure{margin-top:26px;border-left:2px solid var(--gold);padding:4px 0 4px 20px}
.measure .stat-l{display:block;margin-bottom:6px}
.measure p{margin:0;font-size:15px;color:#C1C7DC}

.stat-l{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}

/* case studies */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.case{background:var(--navy);padding:clamp(26px,3vw,38px);display:flex;flex-direction:column;
  min-height:330px;transition:background .3s}
.sec-alt .case{background:var(--ink)}
.case:hover{background:var(--navy-lift)}
.case-sector{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:18px}
.case h3{margin-bottom:14px}
.case p{font-size:15px;color:#B4BAD0;margin:0 0 20px}
.case-fig{margin-top:auto;border-top:1px solid var(--rule);padding-top:18px}
.case-fig b{display:block;font-family:var(--display);font-size:34px;color:var(--gold-lit);line-height:1.1}
.case-fig span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}

/* anatomy of a case study */
.anat{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,44px);margin-top:12px}
.anat > div{border-top:2px solid var(--gold);padding-top:20px}
.anat h3{font-size:17px;margin-bottom:12px}
.anat p{font-size:15px;color:#B4BAD0;margin:0}

.quote{border-left:2px solid var(--gold);padding:6px 0 6px 26px;margin:clamp(36px,5vw,56px) 0 0;max-width:62ch}
.quote blockquote{margin:0;font-family:var(--display);font-size:clamp(20px,2.6vw,27px);
  line-height:1.45;color:var(--cream)}
.quote cite{display:block;margin-top:18px;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--slate);font-style:normal}

/* placeholder flag */
.todo{border:1px dashed var(--rule);padding:20px 24px;margin-top:clamp(30px,4vw,44px);
  font-family:var(--mono);font-size:12px;line-height:1.9;letter-spacing:.04em;color:var(--slate)}
.todo b{color:var(--gold);font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  display:block;margin-bottom:8px;font-size:10.5px}

/* closing cta */
.close{background:var(--ink);border-top:1px solid var(--rule)}
.close .wrap{padding-block:clamp(60px,8vw,100px);text-align:center}
.close h2{margin-bottom:20px}
.close .lede{margin-inline:auto}
.close .cta-row{justify-content:center}

/* footer */
.foot{border-top:1px solid var(--rule);padding:52px 0 40px;background:var(--ink)}
.foot-in{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;align-items:center}
.foot img{height:52px;opacity:.85}
.foot-meta{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--slate);line-height:2}
.foot-meta a:hover{color:var(--gold-lit)}

/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}

/* ---- responsive ---- */
@media(max-width:980px){
  .cases{grid-template-columns:repeat(2,1fr)}
  .anat{grid-template-columns:1fr}
  .svc{grid-template-columns:1fr;gap:22px}
  .svc-side{position:static}
  .gridstrip{display:none}
}
@media(max-width:720px){
  .nav-links{display:none;position:absolute;top:82px;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:0;background:var(--ink);border-bottom:1px solid var(--rule);padding:8px 0}
  .nav-links.open{display:flex}
  .nav-links a{padding:14px var(--gut)}
  .nav-links .btn{margin:12px var(--gut);text-align:center}
  .nav-toggle{display:block}
  .cases{grid-template-columns:1fr}
  .jump{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;
    transition-duration:.001s!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
  .draw{stroke-dashoffset:0!important}
  .fadein{opacity:1!important}
  .hero h1 em::after{transform:scaleX(1)!important}
}

/* ---------------------------------------------------------------------------
   HOME PAGE ONLY — hero, Hoddle Grid map, service blocks, approach steps,
   stats and the contact form. Other pages ignore all of this.
   --------------------------------------------------------------------------- */
.hero{position:relative;padding:clamp(56px,8vw,104px) 0 clamp(60px,9vw,110px);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 78% 22%,rgba(197,162,83,.13),transparent 62%);pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(30px,5vw,72px);align-items:center}
.hero h1{font-size:clamp(42px,6.6vw,80px);letter-spacing:.005em;margin-bottom:26px}
.hero h1 em{font-style:normal;color:var(--gold);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:3px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  animation:swipe 1s cubic-bezier(.2,.7,.2,1) 1.5s forwards}
@keyframes swipe{to{transform:scaleX(1)}}
.hero-note{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--slate);margin-top:22px;text-align:center;line-height:1.9}
.hero-note b{color:var(--gold);font-weight:500}
.map-frame{position:relative;border:1px solid var(--rule);padding:18px;background:rgba(10,13,36,.42)}
.map-frame::before,.map-frame::after{content:"";position:absolute;width:9px;height:9px;border:1px solid var(--gold)}
.map-frame::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.map-frame::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.map-frame svg{width:100%;height:auto;display:block}

/* hero: search-results graphic */
.rank-bar{fill:none;stroke:var(--gold);stroke-opacity:.28;stroke-width:1}
.rank-query{font-family:var(--mono);font-size:14px;fill:var(--cream);fill-opacity:.62;letter-spacing:.04em}
.rank-lens{fill:none;stroke:var(--gold);stroke-opacity:.5;stroke-width:1.6}
.rank-lens-h{stroke:var(--gold);stroke-opacity:.5;stroke-width:1.6;stroke-linecap:round}
.rank-n{font-family:var(--mono);font-size:13px;fill:var(--gold);fill-opacity:.32}
.rank-title{fill:var(--cream);fill-opacity:.16}
.rank-url{fill:var(--gold);fill-opacity:.14}
.rank-card{fill:var(--navy);stroke:var(--gold-lit);stroke-width:2}
.rank-n-lit{fill:var(--gold-lit);fill-opacity:1;font-weight:500}
.rank-title-lit{fill:var(--cream);fill-opacity:.92}
.rank-url-lit{fill:var(--gold-lit);fill-opacity:.85}
.rank-dot{fill:var(--gold-lit);animation:pulse 2.6s ease-in-out 2.6s infinite}
.rank-rise{transform:translateY(250px);animation:rise 1.5s cubic-bezier(.22,.75,.2,1) .75s forwards}
@keyframes rise{to{transform:translateY(0)}}
.blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.block{background:var(--ink);padding:clamp(26px,3vw,40px);position:relative;transition:background .3s;
  min-height:250px;display:flex;flex-direction:column}
.block:hover{background:var(--navy)}
.block-tag{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--gold);
  text-transform:uppercase;margin-bottom:20px}
.block h3{margin-bottom:12px}
.block p{font-size:15px;color:#B4BAD0;margin:0}
.block-line{height:1px;background:var(--gold);width:0;transition:width .4s ease;margin-top:auto}
.block:hover .block-line{width:44px}
.steps{border-top:1px solid var(--rule)}
.step{display:grid;grid-template-columns:88px 1fr 1.35fr;gap:clamp(18px,3vw,40px);
  padding:34px 0;border-bottom:1px solid var(--rule);align-items:start}
.step-n{font-family:var(--display);font-size:34px;color:var(--gold);font-weight:400;line-height:1}
.step h3{padding-top:6px}
.step p{margin:0;padding-top:8px;font-size:15.5px;color:#B4BAD0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px)}
.stat{border-top:2px solid var(--gold);padding-top:22px}
.stat-n{font-family:var(--display);font-size:clamp(38px,5.2vw,60px);color:var(--cream);line-height:1;margin-bottom:12px}
.stat p{font-size:14.5px;color:var(--slate);margin:10px 0 0}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,80px);align-items:start}
.field{margin-bottom:20px}
label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin-bottom:9px}
input,textarea,select{width:100%;background:transparent;border:0;border-bottom:1px solid var(--rule);
  color:var(--cream);font-family:var(--body);font-size:16px;font-weight:300;padding:11px 2px;transition:border-color .25s}
input:focus,textarea:focus,select:focus{outline:0;border-bottom-color:var(--gold)}
select option{background:var(--navy);color:var(--cream)}
textarea{resize:vertical;min-height:104px}
.contact-detail{margin-bottom:26px}
.contact-detail .stat-l{margin-bottom:7px;display:block}
.contact-detail a:hover{color:var(--gold-lit)}
.formnote{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--slate);margin-top:16px}
.sent{display:none;border:1px solid var(--gold);padding:14px 18px;margin-top:18px;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--gold-lit)}
.sent.show{display:block}
.draw{stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900);animation:draw 1.5s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.fadein{opacity:0;animation:fade .8s ease forwards}
@keyframes fade{to{opacity:1}}
@keyframes pulse{0%,100%{r:3.4;opacity:1}50%{r:6;opacity:.35}}
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .blocks{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
  .step{grid-template-columns:60px 1fr;row-gap:4px}
  .step p{grid-column:2}
}
@media(max-width:720px){
  .blocks{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr;gap:30px}
}