@font-face{font-family:"EB Garamond";src:url("assets/brand/fonts/EBGaramond-Regular.woff2") format("woff2"),url("assets/brand/fonts/EBGaramond-Regular.ttf") format("truetype");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url("assets/brand/fonts/EBGaramond-Italic.woff2") format("woff2"),url("assets/brand/fonts/EBGaramond-Italic.ttf") format("truetype");font-weight:400 700;font-style:italic;font-display:swap}

:root{
  --navy:#1B2A45; --navy-dark:#141F36; --taupe:#B39B6E; --taupe-soft:#E4D9C4; --cream:#F5F1E9;
  --ink:#1B2A45; --muted:#55524B; --line:#E4DCCB; --bg:#ffffff;
  --radius:14px; --shadow:0 12px 32px rgba(27,42,69,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65}
h1,h2,h3,.logo-word{font-family:"EB Garamond",Georgia,serif}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}
.center{text-align:center}

/* header */
.hdr{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;min-height:76px;padding-top:10px;padding-bottom:10px;gap:16px}
.brand-mark{display:inline-flex;align-items:center;gap:10px;text-decoration:none;line-height:1;flex-shrink:0}
.brand-mark .brand-icon{width:38px;height:38px;flex:0 0 auto}
.brand-word{display:flex;flex-direction:column;align-items:center;min-width:104px}
.brand-word strong{font-family:"EB Garamond",Georgia,serif;font-size:27px;font-weight:500;letter-spacing:.2px;color:var(--navy)}
.brand-word small{margin-top:4px;font-size:9px;font-weight:800;letter-spacing:4px;text-transform:uppercase;color:var(--taupe);padding-left:4px}
.nav{display:flex;gap:24px;align-items:center}
.nav a{text-decoration:none;color:var(--muted);font-weight:600;font-size:14.5px;letter-spacing:.2px;padding:6px 0;border-bottom:2px solid transparent;transition:color .15s, border-color .15s}
.nav a:hover,.nav a.active{color:var(--navy);border-color:var(--taupe)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--navy);color:#fff;text-decoration:none;font-weight:700;padding:12px 22px;border-radius:999px;border:0;cursor:pointer;font-size:14.5px;letter-spacing:.2px;transition:background .15s, transform .15s;text-align:center}
.btn:hover{background:var(--navy-dark)}
.btn.wa{background:#1F8A5B}.btn.wa:hover{background:#187048}
.btn.ghost{background:transparent;color:var(--navy);border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:var(--taupe)}

/* mobile menu toggle */
.hdr-actions{display:flex;align-items:center;gap:10px}
.menu-toggle{display:none;align-items:center;justify-content:center;width:42px;height:42px;flex:0 0 auto;background:#fff;border:1.5px solid var(--line);border-radius:10px;cursor:pointer;padding:0}
.menu-toggle span{position:relative;display:block;width:18px;height:2px;background:var(--navy);border-radius:2px}
.menu-toggle span::before,.menu-toggle span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--navy);border-radius:2px;transition:transform .18s ease, opacity .18s ease}
.menu-toggle span::before{top:-6px}
.menu-toggle span::after{top:6px}
.menu-toggle.is-open span{background:transparent}
.menu-toggle.is-open span::before{top:0;transform:rotate(45deg)}
.menu-toggle.is-open span::after{top:0;transform:rotate(-45deg)}

@media(max-width:860px){
  .hdr .wrap{justify-content:space-between}
  .hdr .btn{padding:9px 15px;font-size:13px}
  .menu-toggle{display:inline-flex}
  .nav{
    display:flex;flex-direction:column;gap:0;
    position:fixed;top:76px;left:0;right:0;z-index:29;
    background:#fff;border-bottom:1px solid var(--line);
    box-shadow:0 16px 30px rgba(27,42,69,.10);
    padding:6px 22px 18px;
    transform:translateY(-10px);opacity:0;pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
    max-height:calc(100vh - 76px);overflow-y:auto;
  }
  .nav.open{transform:none;opacity:1;pointer-events:auto}
  .nav a{padding:14px 2px;border-bottom:1px solid var(--line);width:100%}
  .nav a:last-child{border-bottom:0}
}

/* hero */
.hero{background:var(--cream);color:var(--ink);position:relative}
.hero .wrap{position:relative;padding:72px 22px 64px;max-width:1140px}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.hero-copy{max-width:620px}
.hero-media{margin:0;border-radius:20px;overflow:hidden;box-shadow:0 20px 50px rgba(27,42,69,.12);background:#eae3d3;aspect-ratio:16/11}
.hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.page-hero .hero-media,.hero-media.compact{aspect-ratio:16/10;max-height:360px}

@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .hero .wrap{padding:48px 22px}
  .hero-media,.page-hero .hero-media,.hero-media.compact{aspect-ratio:16/10;max-height:none}
}

/* Parallax hero image — opt-in via .parallax, trialled on the Services page only */
.hero-media.parallax img{height:130%;top:-15%;position:relative;will-change:transform}
@media(prefers-reduced-motion:reduce){
  .hero-media.parallax img{transform:none!important;top:0;height:100%}
}

.hero:not(.page-hero) .wrap{padding-bottom:20px}

/* Full-bleed hero — opt-in via .hero-wide on the .hero section.
   The <figure> is a direct child of .hero (not inside .wrap) and is absolutely
   positioned to fill the section, so the image spans the full page width with no
   100vw maths that would overflow past the scrollbar.
   Declared after the rules above so it wins on source order, not !important. */
.hero.hero-wide{position:relative;overflow:hidden;background:var(--cream)}
.hero.hero-wide > .hero-media{
  position:absolute;inset:0;
  width:100%;height:100%;max-height:none;
  margin:0;border-radius:0;box-shadow:none;aspect-ratio:auto
}
/* These photos were framed for a small 16:10 card, so at full width they need
   pulling right — the subject sits off-centre, clear of the copy on the left. */
.hero.hero-wide > .hero-media img{width:100%;height:100%;object-fit:cover;object-position:72% center}
/* A light, uniform wash over the whole photo — tone only, not relied on for
   text contrast (see the copy-anchored scrim below for that). */
.hero.hero-wide::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(245,241,233,.16)
}
.hero.hero-wide .wrap{position:relative;z-index:2;padding:88px 22px}
.hero.hero-wide .hero-grid{grid-template-columns:1fr;gap:0}
.hero.hero-wide .hero-copy{position:relative;max-width:600px}
/* Legibility now leans on dark, high-contrast text rather than a solid panel —
   the panel only needs to knock back the busiest part of the photo, not hide
   it. It's translucent throughout (photo still visible through it) and fades
   out well before hero-copy's own right edge, so a clear strip of the image
   always shows past the text. .wrap is centred with a fixed max-width, so on
   a wide viewport there's a growing gap between the section's left edge and
   where the copy starts — anchoring this to .hero-copy's own box (rather than
   a % of the full section) means it still tracks the text at any width; it
   bleeds far off to the left, where there's nothing to hide anyway. */
.hero.hero-wide .hero-copy::before{
  content:"";position:absolute;z-index:-1;top:-48px;bottom:-48px;left:-800px;right:-56px;
  /* This box is 1456px wide (800 left bleed + hero-copy's own 600px + 56 right
     bleed), so hero-copy's own text only starts at 55% of it and ends at 96%
     — stops need to be read against that, not against hero-copy's own width.
     88%/100% here means: a flat, uniform 50% wash across all of the bleed AND
     all of hero-copy's text, then a fast fade in the last ~12% of the box —
     which lands in hero-copy's final ~40px plus the right bleed. So the photo
     shows through at half-strength everywhere the text sits (this is the
     "more photo visible" the panel was hiding before), and clears fully just
     past where the text ends. */
  background:linear-gradient(90deg,
    rgba(245,241,233,.5) 0%,
    rgba(245,241,233,.5) 88%,
    rgba(245,241,233,0) 100%)
}

@media(max-width:860px){
  .hero.hero-wide .wrap{padding:64px 22px}
  .hero.hero-wide .hero-copy{max-width:none}
  /* Narrow screens: the copy needs the full width, so the scrim goes vertical
     instead of fading sideways off the text — still translucent, not solid. */
  .hero.hero-wide .hero-copy::before{
    left:-22px;right:-22px;top:-40px;bottom:-40px;
    background:linear-gradient(180deg,
      rgba(245,241,233,.68) 0%,
      rgba(245,241,233,.68) 60%,
      rgba(245,241,233,.5) 100%)
  }
}
.eyebrow{color:var(--taupe);font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:12px;margin-bottom:14px}
.hero h1{font-size:clamp(30px,4.5vw,50px);line-height:1.16;margin:0 0 20px;font-weight:500;color:var(--navy)}
.hero p.lead{font-size:18px;color:var(--muted);margin:0 0 30px;max-width:54ch}
/* Wide heroes sit over a photo through a translucent (not solid) panel, so the
   text itself carries the contrast — darker than the flat-background versions
   above, plus a soft light halo so it holds up wherever the photo underneath
   gets bright. */
.hero-wide .eyebrow{color:#5c4520;text-shadow:0 1px 3px rgba(245,241,233,.7)}
.hero-wide h1{text-shadow:0 1px 4px rgba(245,241,233,.5)}
.hero-wide p.lead{color:#201f1c;text-shadow:0 1px 3px rgba(245,241,233,.7)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.page-hero{padding:0}
.page-hero h1{font-size:clamp(28px,3.8vw,42px)}

/* sections */
section{padding:76px 0}
section.tight{padding:52px 0}
.sec-head{max-width:680px;margin:0 auto 44px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{font-size:clamp(24px,3.2vw,34px);margin:0 0 14px;font-weight:500;position:relative;display:inline-block;padding-bottom:16px}
.sec-head h2::after{content:"";position:absolute;left:0;bottom:0;width:48px;height:2px;background:var(--taupe)}
.sec-head.center h2::after{left:50%;transform:translateX(-50%)}
.sec-head p{color:var(--muted);margin:0;font-size:16.5px}
.on-cream{background:var(--cream)}

/* reveal animation */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}

/* pillar / feature grid */
.grid{display:grid;gap:22px}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:960px){.grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid.cols-4,.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:box-shadow .18s, transform .18s, border-color .18s}
.card:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:var(--taupe-soft)}
.card .ic{width:46px;height:46px;border-radius:11px;background:var(--cream);border:1px solid var(--line);display:grid;place-items:center;margin-bottom:16px;color:var(--navy)}
.card .ic svg{width:22px;height:22px}
.card h3{margin:0 0 8px;font-size:18px;font-weight:600}
.card p{margin:0;color:var(--muted);font-size:14.5px}

/* numbered steps */
.steps{counter-reset:step;display:grid;gap:0}
.step{display:grid;grid-template-columns:56px 1fr;gap:20px;padding:24px 0;border-bottom:1px solid var(--line);align-items:start}
.step:last-child{border-bottom:0}
.step .num{counter-increment:step;width:46px;height:46px;border-radius:50%;background:var(--navy);color:var(--taupe-soft);display:grid;place-items:center;font-family:"EB Garamond",serif;font-size:20px;font-weight:600}
.step .num::before{content:counter(step)}
.step h3{margin:0 0 6px;font-size:18px;font-weight:600}
.step p{margin:0;color:var(--muted);font-size:15px}

/* list */
.check-list{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.check-list li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px}
.check-list .tick{color:var(--taupe);flex:0 0 auto;font-weight:700}

/* CTA band */
.cta-band{background:var(--bg);text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:72px 0}
.cta-band h2{font-family:"EB Garamond",serif;font-size:clamp(24px,3vw,34px);margin:0 0 22px;font-weight:500;color:var(--navy)}

/* demo showcase */
.demo-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);position:relative;background:#fff}
.demo-card .chrome{background:#EAE3D3;padding:10px 14px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line)}
.demo-card .chrome .dot{width:9px;height:9px;border-radius:50%;background:#D8CBAE}
.demo-card .chrome .addr{margin-left:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 14px;font-size:12px;color:var(--muted);flex:1;max-width:280px}
.demo-card .badge{position:absolute;top:16px;right:16px;z-index:2;background:var(--navy);color:#fff;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.demo-card .frame{aspect-ratio:16/10;background:var(--cream);position:relative;overflow:hidden}
.demo-card .frame img{width:100%;height:100%;object-fit:cover;object-position:top center}
.demo-card .frame iframe{display:block;width:160%;height:160%;border:0;pointer-events:none;transform:scale(.625);transform-origin:top left;background:#fff}
.demo-card .body{padding:24px 26px}
.disclaimer-box{background:var(--cream);border:1px solid var(--taupe-soft);border-radius:var(--radius);padding:18px 22px;font-size:14px;color:var(--navy);margin:0 0 30px}
.disclaimer-box strong{color:var(--navy)}

/* about principles */
.principle{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);align-items:start}
.principle:last-child{border-bottom:0}
.principle .mark{width:34px;height:34px;border-radius:8px;background:var(--navy);color:var(--taupe-soft);display:grid;place-items:center;font-family:"EB Garamond",serif;font-weight:700}
.principle h3{margin:0 0 4px;font-size:17px}
.principle p{margin:0;color:var(--muted);font-size:15px}

/* Page visual story showcases */
.design-story{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.design-story.reverse{grid-template-columns:1fr 1fr}
@media(max-width:860px){
  .design-story,.design-story.reverse{grid-template-columns:1fr;gap:34px}
}
.screen-art{border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 20px 50px rgba(27,42,69,.12);overflow:hidden;position:relative}
.screen-art .screen-bar{height:32px;background:#eae3d3;display:flex;gap:7px;align-items:center;padding:0 13px}
.screen-art .screen-bar i{width:7px;height:7px;border-radius:50%;background:#c8b996}
.screen-art .banner-image{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.screen-caption{font-size:13px;color:var(--muted);margin-top:18px}

/* faq */
.faq-item{padding:18px 0;border-bottom:1px solid var(--line)}
.faq-item:last-child{border-bottom:0}
.faq-item h3{margin:0 0 6px;font-size:16.5px;font-weight:600}
.faq-item p{margin:0;color:var(--muted);font-size:15px}

/* legal pages */
.legal-doc{max-width:720px}
.legal-doc h2{font-size:21px;margin:36px 0 12px;font-weight:600;font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.legal-doc h2:first-child{margin-top:0}
.legal-doc p,.legal-doc li{color:var(--muted);font-size:15.5px}
.legal-doc ul{padding-left:20px}
.legal-doc .updated{color:var(--taupe);font-size:13px;font-weight:600;letter-spacing:.3px;text-transform:uppercase}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:48px}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr;gap:36px}}
.info-row{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line)}
.info-row:last-child{border-bottom:0}
.info-row .k{width:40px;height:40px;border-radius:10px;background:var(--cream);border:1px solid var(--line);display:grid;place-items:center;color:var(--navy);flex:0 0 auto}
.info-row b{display:block;font-size:15px}
.info-row span{color:var(--muted);font-size:14.5px}
.placeholder-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;background:#FCEFD9;color:#8a5a10;border:1px solid #EAD4A6;border-radius:5px;padding:2px 7px;margin-left:8px;vertical-align:middle}

form.enquiry{display:grid;gap:16px}
form.enquiry .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){form.enquiry .row2{grid-template-columns:1fr}}
form.enquiry label{display:block;font-size:13.5px;font-weight:700;margin-bottom:7px;color:var(--navy)}
form.enquiry input,form.enquiry textarea,form.enquiry select{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:9px;font-size:15px;font-family:inherit;color:var(--ink);background:#fff}
form.enquiry input:focus,form.enquiry textarea:focus,form.enquiry select:focus{outline:2px solid var(--taupe);outline-offset:1px;border-color:var(--taupe)}
form.enquiry textarea{resize:vertical;min-height:110px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--muted)}
.consent input{width:auto;margin-top:3px}
.form-note{font-size:13px;color:var(--muted);margin-top:6px}
.btn:focus-visible,.nav a:focus-visible,.fnav a:focus-visible{outline:2px solid var(--taupe);outline-offset:2px}

/* footer */
footer{background:var(--cream);color:var(--muted);padding:52px 0 28px;border-top:1px solid var(--line)}
footer .top{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-bottom:28px;align-items:flex-start}
footer .brand-mark{align-items:center}
footer .brand-icon{width:40px;height:40px}
footer .brand-word strong{font-size:28px}
footer .brand-word small{font-size:9px}
footer a{color:var(--muted);text-decoration:none}
footer .fnav{display:flex;gap:20px;flex-wrap:wrap}
footer .fnav a:hover{color:var(--navy)}
footer .tagline{color:var(--taupe);font-family:"EB Garamond",serif;font-style:italic;margin-top:12px;font-size:15px}
footer .bottom{border-top:1px solid var(--line);padding-top:20px;font-size:12.5px;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}