/* ===================================================================
   OFMM — West Cork digital studio.  Editorial system, teal accent.
   Fraunces (display) · Hanken Grotesk (body) · JetBrains Mono (labels)
   =================================================================== */
:root{
  --bg:#E7DCC6; --bg2:#E0D4BB; --card:#F1EAD9; --card2:#F5EFE1;
  --ink:#17302B; --ink-soft:#4C5A50; --ink-faint:#7C877D;
  --line:#D3C7AD; --line2:#C6BA9E;
  --teal:#1E6F63; --teal-deep:#17564D; --teal-hl:#C6DBD2; --teal-soft:#9CC3BA;
  --gold:#E7B25C;
  --dark:#0B211D; --dark2:#102B25; --dark-ink:#EBE2CF; --dark-soft:#8DA69B; --dark-line:#23342E;
  --fd:"Fraunces",Georgia,"Times New Roman",serif;
  --fg:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --fb:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --fm:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --maxw:1180px; --sh:0 22px 54px -34px rgba(40,35,20,.5);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--fb);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 34px}
.narrow{max-width:760px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
[hidden]{display:none!important}
h1,h2,h3,h4{font-family:var(--fd);font-weight:400;letter-spacing:-.012em;line-height:1.05;text-wrap:balance}
b,strong{font-weight:600}
.hl{background:var(--teal-hl);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone;border-radius:2px}
.k{font-family:var(--fm);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);font-weight:500;display:inline-block}
.k::before{content:"// ";color:var(--teal)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--fm);font-size:11.5px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;padding:13px 22px;border-radius:999px;background:var(--teal);
  color:#F6F3EC;border:1px solid var(--teal-deep);cursor:pointer;transition:transform .15s,background .18s,box-shadow .2s;white-space:nowrap}
.btn:hover{background:var(--teal-deep);transform:translateY(-2px);box-shadow:0 14px 26px -16px rgba(15,106,93,.6)}
.btn.big{padding:16px 30px;font-size:12.5px}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line2)}
.btn.ghost:hover{border-color:var(--ink);background:transparent;box-shadow:none}
.link{display:inline-flex;align-items:center;gap:8px;font-family:var(--fm);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);border-bottom:1.5px solid var(--teal);padding-bottom:3px;transition:gap .18s}
.link:hover{gap:13px}

/* ---- nav ---- */
header.nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(1.3) blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
header.nav.scrolled{border-color:var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:74px;gap:20px}
.brand{display:flex;align-items:baseline;gap:7px}
.brand .wm{font-family:var(--fg);font-weight:700;font-size:21px;letter-spacing:-.022em;color:var(--ink);line-height:1}
.brand .wmt{font-family:var(--fm);font-weight:500;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint)}
.brand .dot{width:7px;height:7px;border-radius:50%;background:var(--teal);display:inline-block;align-self:center}
.foot-brand .brand .wm{color:var(--dark-ink)}
.foot-brand .brand .wmt{color:var(--dark-soft)}
.navlinks{display:flex;align-items:center;gap:30px}
.navlinks a:not(.btn){font-family:var(--fm);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);transition:color .16s;position:relative}
.navlinks a:not(.btn):hover,.navlinks a.active{color:var(--ink)}
.navlinks a.active::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--teal)}
.has-dd{position:relative;display:flex;align-items:center}
.has-dd>a{display:flex;align-items:center;gap:5px}
.has-dd>a .car{font-size:8px;transition:transform .18s;color:var(--teal)}
.has-dd:hover>a .car{transform:rotate(180deg)}
.has-dd::after{content:"";position:absolute;top:100%;left:-14px;right:-14px;height:22px}
.dd{position:absolute;top:calc(100% + 20px);left:50%;transform:translateX(-50%) translateY(6px);min-width:264px;
  background:var(--card2);border:1px solid var(--line2);border-radius:12px;box-shadow:0 26px 60px -30px rgba(40,35,20,.55);
  padding:8px;opacity:0;visibility:hidden;transition:opacity .16s ease,transform .16s ease;z-index:80}
.has-dd:hover .dd{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dd a{display:block;font-family:var(--fb);font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink-soft);padding:10px 14px;border-radius:8px;white-space:nowrap}
.dd a:hover{background:var(--bg2);color:var(--ink)}
.dd a.lead{color:var(--teal);font-weight:600;border-top:1px solid var(--line);border-radius:0 0 8px 8px;margin-top:4px}
.dd .ddnote{display:block;font-family:var(--fm);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);padding:8px 14px 4px}
@media(max-width:900px){.has-dd{display:none}}
.burger{display:none;width:44px;height:44px;position:relative;background:none;border:none;cursor:pointer;z-index:70;-webkit-tap-highlight-color:transparent}
.burger span{position:absolute;left:11px;right:11px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .2s}
.burger span:nth-child(1){top:16px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:26px}
body.menu-open .burger span:nth-child(1){transform:translateY(5px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.sheet{position:fixed;inset:0;z-index:58;background:var(--bg);padding:100px 34px 44px;flex-direction:column;
  display:flex;overflow-y:auto;-webkit-overflow-scrolling:touch;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .3s,transform .3s,visibility .3s}
body.menu-open .sheet{opacity:1;visibility:visible;transform:none}
.sheet a:not(.btn){font-family:var(--fd);font-size:clamp(28px,8vw,36px);font-weight:400;padding:16px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.sheet .btn{margin-top:30px;align-self:flex-start}
.sheet-group{border-bottom:1px solid var(--line)}
.sheet-group summary{list-style:none;cursor:pointer;font-family:var(--fd);font-size:clamp(28px,8vw,36px);font-weight:400;
  padding:16px 0;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:16px;-webkit-tap-highlight-color:transparent}
.sheet-group summary::-webkit-details-marker{display:none}
.sheet-group summary .scar{font-size:.4em;color:var(--teal);transition:transform .22s;flex:0 0 auto}
.sheet-group[open] summary .scar{transform:rotate(180deg)}
.sheet-group .sheet-sub{margin:2px 0 14px}
.sheet-sub{display:flex;flex-direction:column;margin:-4px 0 4px;padding-left:2px}
.sheet-sub a:not(.btn){font-family:var(--fb)!important;font-size:16px!important;text-transform:none!important;
  letter-spacing:0!important;color:var(--ink-soft)!important;padding:11px 0 11px 18px!important;border-bottom:1px solid var(--line);
  position:relative}
.sheet-sub a:not(.btn)::before{content:"";position:absolute;left:2px;top:50%;width:6px;height:1px;background:var(--teal)}
body.menu-open{overflow:hidden}
@media(max-width:900px){.navlinks{display:none}.burger{display:block}}

/* ---- sections ---- */
.page{animation:fade .5s ease both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
section{padding:100px 0;border-bottom:1px solid var(--line)}
.sec{padding:100px 0;border-bottom:1px solid var(--line)}
.alt{background:var(--bg2)}
.sec-head{max-width:820px;margin-bottom:52px}
.sec-head .k{margin-bottom:20px}
.sec-head h2{font-size:clamp(31px,4.7vw,52px);font-weight:400}
.sec-head p{margin-top:22px;font-size:18px;color:var(--ink-soft);line-height:1.62;max-width:620px}
.center{text-align:center;margin-left:auto;margin-right:auto}

/* ---- hero ---- */
.hero{padding:104px 0 60px;border-bottom:1px solid var(--line)}
.hero .k{margin-bottom:30px}
.hero h1{font-size:clamp(46px,8vw,92px);font-weight:400;letter-spacing:-.022em;max-width:14ch}
.hero .lead{margin-top:34px;font-size:clamp(18px,2.1vw,21.5px);color:var(--ink-soft);line-height:1.55;max-width:600px}
.hero .lead b{color:var(--ink)}
.hero-cta{margin-top:40px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-meta{margin-top:44px;display:flex;gap:34px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:26px}
.hero-meta .hm{display:flex;flex-direction:column;gap:5px}
.hero-meta .hm b{font-family:var(--fd);font-size:24px;font-weight:500;line-height:1}
.hero-meta .hm span{font-family:var(--fm);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint)}

/* ---- thesis two-col ---- */
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.twocol h2{font-size:clamp(30px,4.4vw,46px);font-weight:400}
.twocol .k{margin-bottom:20px}
.twocol .body p{color:var(--ink-soft);font-size:17.5px;line-height:1.72}
.twocol .body p+p{margin-top:18px}
.twocol .link{margin-top:26px}
@media(max-width:860px){.twocol{grid-template-columns:1fr;gap:30px}}

/* ---- hairline grids: services / steps / tiers / stats ---- */
.grid3,.grid4,.steps,.tiers{display:grid;gap:1px;background:var(--line);border:1px solid var(--line2);border-radius:16px;overflow:hidden;box-shadow:var(--sh)}
.grid3{grid-template-columns:repeat(3,1fr)}
.grid4{grid-template-columns:repeat(4,1fr)}
.cell{background:var(--card);padding:34px 30px;display:flex;flex-direction:column}
.cell .num{font-family:var(--fm);font-size:12px;color:var(--teal);letter-spacing:.08em}
.cell h3{font-size:23px;margin:16px 0 11px;line-height:1.12;font-weight:400}
.cell p{font-size:14.5px;color:var(--ink-soft);line-height:1.6}
.cell ul{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:9px}
.cell li{font-size:13.5px;color:var(--ink-soft);padding-left:18px;position:relative;line-height:1.45}
.cell li::before{content:"\2192";position:absolute;left:0;color:var(--teal)}
.cell .clink{margin-top:20px;font-family:var(--fm);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);border-top:1px solid var(--line);padding-top:14px;display:inline-flex;gap:7px}
.cell.link-cell{cursor:pointer;transition:background .16s}
.cell.link-cell:hover{background:var(--card2)}
@media(max-width:860px){.grid3,.grid4{grid-template-columns:1fr}}
.steps{grid-template-columns:repeat(4,1fr)}
.steps .cell{padding:30px 24px}
.steps .cell h3{font-size:20px;margin:14px 0 9px}
.steps .cell p{font-size:13.5px}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.steps{grid-template-columns:1fr}}

/* ---- tiers (pricing) ---- */
.tiers{grid-template-columns:repeat(3,1fr)}
.tier{background:var(--card);padding:34px 30px;display:flex;flex-direction:column}
.tier.feat{background:var(--dark);color:var(--dark-ink)}
.tier .tspeed{font-family:var(--fm);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.tier.feat .tspeed{color:var(--teal-soft)}
.tier .tname{font-family:var(--fd);font-size:24px;margin:12px 0 4px;font-weight:400}
.tier .amt{font-family:var(--fd);font-size:30px;font-weight:500;letter-spacing:-.01em}
.tier .amt small{font-family:var(--fb);font-size:14px;font-weight:400;color:var(--ink-faint)}
.tier.feat .amt small{color:var(--dark-soft)}
.tier .tdesc{font-size:14px;color:var(--ink-soft);line-height:1.55;margin:12px 0 18px}
.tier.feat .tdesc{color:var(--dark-soft)}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0 0 22px}
.tier li{font-size:13.5px;color:var(--ink-soft);padding-left:20px;position:relative;line-height:1.45}
.tier.feat li{color:var(--dark-ink)}
.tier li::before{content:"\2192";position:absolute;left:0;color:var(--teal)}
.tier.feat li::before{color:var(--teal-soft)}
.tier .btn{margin-top:auto;justify-content:center}
.tier.feat .btn.ghost{border-color:var(--dark-soft);color:var(--dark-ink)}
.tier.feat .btn.ghost:hover{border-color:var(--dark-ink)}
@media(max-width:820px){.tiers{grid-template-columns:1fr}}
.price-note{margin-top:20px;font-size:13.5px;color:var(--ink-faint);text-align:center}

/* ---- pill ---- */
.pill{display:inline-block;font-family:var(--fm);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  background:var(--teal-hl);color:var(--teal-deep);padding:5px 12px;border-radius:999px;border:1px solid var(--teal-soft)}

/* ---- work cards ---- */
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
@media(max-width:820px){.work-grid{grid-template-columns:1fr}}
.wcard{display:block;transition:transform .22s}
.wcard:hover{transform:translateY(-5px)}
.wcard:hover .bw{box-shadow:0 30px 60px -30px rgba(30,26,14,.6)}
.wcard-meta{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-top:18px}
.wcard-meta h3{font-size:22px;font-weight:400;line-height:1.1}
.wcard-meta p{font-family:var(--fm);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin-top:8px}
.wcard-tag{font-family:var(--fm);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-deep);
  background:var(--teal-hl);border:1px solid var(--teal-soft);border-radius:999px;padding:5px 10px;white-space:nowrap}

/* ---- carousel ---- */
.chead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:40px}
.chead h2{font-size:clamp(31px,4.7vw,52px);font-weight:400}
.chead .k{margin-bottom:16px}
.carousel-wrap{position:relative;margin:0 -34px;padding:0 34px}
.carousel{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 0 6px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.carousel::-webkit-scrollbar{display:none}
.carousel .wcard{flex:0 0 min(520px,80vw);scroll-snap-align:start}
.carousel .bw>img{height:318px;object-fit:cover;object-position:top center}
.cnav{display:flex;gap:11px;margin-top:26px}
.cbtn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line2);background:var(--card2);cursor:pointer;
  font-family:var(--fm);font-size:15px;color:var(--ink);display:flex;align-items:center;justify-content:center;transition:.15s}
.cbtn:hover{border-color:var(--ink);background:var(--card);transform:translateY(-2px)}
@media(max-width:560px){.carousel-wrap{margin:0 -22px;padding:0 22px}}

/* ---- device frames ---- */
.bw{border-radius:12px;overflow:hidden;border:1px solid var(--line2);box-shadow:var(--sh);background:var(--card2);transition:box-shadow .25s}
.bw-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--bg2);border-bottom:1px solid var(--line)}
.bw-bar i{width:11px;height:11px;border-radius:50%;background:var(--line2)}
.bw-bar .u{margin-left:10px;font-family:var(--fm);font-size:11px;color:var(--ink-faint);background:var(--card);
  padding:6px 14px;border-radius:6px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bw>img{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover;object-position:top center}
.ph{position:relative;border:8px solid #17181B;border-radius:34px;overflow:hidden;background:#17181B;box-shadow:var(--sh);width:216px}
.ph .notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:40%;height:16px;background:#17181B;border-radius:0 0 12px 12px;z-index:2}
.ph>img{width:100%;height:auto;display:block;border-radius:26px;aspect-ratio:9/19;object-fit:cover;object-position:top center}

/* ---- testimonials ---- */
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:820px){.tgrid{grid-template-columns:1fr}}
.tcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:34px 32px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:22px}
.tcard blockquote{font-family:var(--fd);font-size:20px;line-height:1.42;color:var(--ink);font-weight:400}
.tcard blockquote::before{content:"\201C";color:var(--teal);margin-right:2px}
.tcard blockquote::after{content:"\201D";color:var(--teal)}
.tcard figcaption{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line);padding-top:18px}
.tcard .tname{font-weight:600;font-size:15px}
.tcard .trole{font-family:var(--fm);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}

/* ---- notes / resource cards ---- */
.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:820px){.notes{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.notes{grid-template-columns:1fr}}
.note{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px 26px;display:flex;flex-direction:column;
  box-shadow:var(--sh);transition:transform .16s,box-shadow .22s}
.note:hover{transform:translateY(-4px);box-shadow:0 30px 58px -30px rgba(40,35,20,.55)}
.note-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.note .rt,.note .tagm{font-family:var(--fm);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.note .tagm{color:var(--teal)}
.note h3,.note h4{font-size:21px;line-height:1.16;font-weight:400;margin-bottom:10px}
.note p{font-size:14px;color:var(--ink-soft);line-height:1.55;flex:1}
.note .read{margin-top:18px;font-family:var(--fm);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  border-top:1px solid var(--line);padding-top:14px;display:inline-flex;gap:6px}
.note.tool{background:var(--dark);color:var(--dark-ink);border-color:var(--dark-line)}
.note.tool h3,.note.tool h4{color:#fff}
.note.tool p{color:var(--dark-soft)}
.note.tool .tagm{color:var(--teal-soft)}
.note.tool .read{color:var(--dark-ink);border-top-color:var(--dark-line)}

/* ---- page hero (inner) ---- */
.phero{padding:70px 0 56px;border-bottom:1px solid var(--line)}
.phero .k{margin-bottom:22px}
.phero h1{font-size:clamp(36px,6vw,66px);font-weight:400;max-width:16ch}
.phero .phlead{margin-top:26px;font-size:clamp(18px,2vw,21px);color:var(--ink-soft);line-height:1.55;max-width:640px}
.crumb{font-family:var(--fm);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:24px;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.crumb a{color:var(--ink-soft)}.crumb a:hover{color:var(--ink)}.crumb em{color:var(--line2);font-style:normal}
.backlink{display:inline-flex;align-items:center;gap:7px;font-family:var(--fm);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:26px}
.backlink:hover{color:var(--ink)}.backlink::before{content:"\2190\00a0"}

/* ---- prose / article ---- */
.prose{max-width:724px}
.prose>p{font-size:18px;line-height:1.75;color:var(--ink-soft)}
.prose>p+p{margin-top:22px}
.prose>p.lead{font-size:21px;line-height:1.6;color:var(--ink)}
.prose h2{font-family:var(--fd);font-size:30px;font-weight:400;margin:52px 0 16px;line-height:1.14}
.prose h3{font-family:var(--fd);font-size:24px;font-weight:400;margin:40px 0 14px;line-height:1.16}
.prose ul,.prose ol{margin:20px 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.prose li{font-size:17.5px;line-height:1.6;color:var(--ink-soft);padding-left:28px;position:relative}
.prose li::before{content:"\2192";position:absolute;left:0;color:var(--teal)}
.prose ol{counter-reset:pli}
.prose ol li::before{content:counter(pli);counter-increment:pli;color:var(--teal);font-family:var(--fm);font-size:13px;font-weight:600;top:1px}
.prose blockquote{margin:36px 0;padding:8px 0 8px 26px;border-left:3px solid var(--teal);font-family:var(--fd);font-size:24px;line-height:1.34;color:var(--ink)}
.take{margin-top:48px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:30px 32px;box-shadow:var(--sh)}
.take h4{font-family:var(--fm);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:16px}
.take h4::before{content:"// ";color:var(--teal)}
.take ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.take li{font-size:16px;line-height:1.55;color:var(--ink-soft);padding-left:24px;position:relative}
.take li::before{content:"\2192";position:absolute;left:0;color:var(--teal)}
.artmeta{display:flex;gap:16px;align-items:center;font-family:var(--fm);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-top:20px}

/* ---- case study ---- */
.cs-devices{display:flex;align-items:flex-end;gap:30px;background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:clamp(20px,4vw,44px);box-shadow:var(--sh)}
.cs-devices .bw{flex:1}
.cs-devices .ph{flex:0 0 auto}
@media(max-width:820px){.cs-devices{flex-direction:column;align-items:center;gap:24px}}
.cs-meta{display:flex;gap:34px;flex-wrap:wrap;margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.cs-meta .m{display:flex;flex-direction:column;gap:6px}
.cs-meta .ml{font-family:var(--fm);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.cs-meta .mv{font-size:15px;color:var(--ink)}
.cs-built{list-style:none;display:flex;flex-direction:column;gap:14px;max-width:760px}
.cs-built li{padding-left:27px;position:relative;font-size:17px;line-height:1.6;color:var(--ink-soft)}
.cs-built li::before{content:"\2192";position:absolute;left:0;color:var(--teal)}
.cs-next{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:26px;margin-top:8px}
.cs-next .nl{font-family:var(--fm);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
.cs-next .nl b{font-family:var(--fd);font-weight:400;text-transform:none;letter-spacing:0;font-size:19px;color:var(--teal)}

/* ---- contact ---- */
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:start}
@media(max-width:840px){.contact-grid{grid-template-columns:1fr;gap:38px}}
.contact-side{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:32px 30px;box-shadow:var(--sh);position:sticky;top:100px}
@media(max-width:840px){.contact-side{position:static}}
.contact-side h3{font-size:22px;font-weight:400;margin-bottom:6px}
.contact-side .side-sub{color:var(--ink-soft);font-size:14.5px;line-height:1.5;margin-bottom:24px}
.cs-points{list-style:none;display:flex;flex-direction:column;gap:18px;margin:0 0 26px}
.cs-points li{padding-left:26px;position:relative}
.cs-points li::before{content:"\2192";position:absolute;left:0;top:1px;color:var(--teal)}
.cs-points b{display:block;font-size:15.5px;margin-bottom:3px;font-weight:600}
.cs-points span{font-size:14px;color:var(--ink-soft);line-height:1.5}
.contact-side .side-contact{border-top:1px solid var(--line);padding-top:20px;font-size:14.5px;color:var(--ink-soft);line-height:1.65}
.contact-side .side-contact a{color:var(--teal);border-bottom:1px solid var(--teal-soft)}
.contact-side .side-loc{font-family:var(--fm);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-top:12px}

/* ---- forms ---- */
.form-wrap{max-width:660px}
.finq label .opt{color:var(--ink-faint);text-transform:none;letter-spacing:0;font-family:var(--fb);font-size:11px}
.finq{display:grid;gap:18px}
.frow{display:grid;gap:8px}
.frow.two{grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:560px){.frow.two{grid-template-columns:1fr}}
.finq label{font-family:var(--fm);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.finq input,.finq select,.finq textarea{font-family:var(--fb);font-size:16px;color:var(--ink);background:var(--card2);
  border:1px solid var(--line2);border-radius:10px;padding:13px 15px;width:100%;outline:none;transition:border-color .15s;appearance:none;-webkit-appearance:none}
.finq select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238C8678' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:38px}
.finq input:focus,.finq select:focus,.finq textarea:focus{border-color:var(--teal)}
.finq textarea{min-height:130px;resize:vertical;line-height:1.5}
.finq .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.finq .sub{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.finq .fnote{font-size:13.5px;color:var(--ink-faint)}
.fmsg{display:none;padding:15px 18px;border-radius:10px;font-size:14.5px}
.fmsg.err{display:block;background:#f2d9cf;color:#7a2e18;border:1px solid #e0a58f}
.form-done{display:none}
.form-done h2{font-family:var(--fd);font-size:clamp(30px,5vw,44px);font-weight:400}
.form-done p{color:var(--ink-soft);margin-top:16px;font-size:18px;max-width:480px;line-height:1.6}

/* ---- about ---- */
.abt-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:66px;align-items:start}
@media(max-width:860px){.abt-grid{grid-template-columns:1fr;gap:40px}}
.abt-lead p{color:var(--ink-soft);font-size:17.5px;line-height:1.75}
.abt-lead p+p{margin-top:18px}
.stat{border-left:2px solid var(--teal);padding-left:20px;margin-bottom:26px}
.stat .big{font-family:var(--fd);font-weight:500;font-size:38px;line-height:1}
.stat .lbl{margin-top:8px;font-size:14.5px;color:var(--ink-soft);line-height:1.5}
.principles{display:grid;grid-template-columns:repeat(2,1fr);gap:34px 56px}
@media(max-width:640px){.principles{grid-template-columns:1fr;gap:26px}}
.principle{border-top:2px solid var(--ink);padding-top:16px}
.principle h4{font-size:20px;margin-bottom:8px;font-weight:400}
.principle p{font-size:15px;color:var(--ink-soft);line-height:1.55}

/* ---- calculator ---- */
.calc{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}
@media(max-width:860px){.calc{grid-template-columns:1fr;gap:28px}}
.calc-controls{display:flex;flex-direction:column;gap:26px}
.cq{display:flex;flex-direction:column;gap:12px}
.cq>.lab{font-family:var(--fm);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
.cq>.lab .hint{color:var(--ink-faint);text-transform:none;letter-spacing:0;font-family:var(--fb);font-size:13px;display:block;margin-top:4px}
.opts{display:flex;flex-wrap:wrap;gap:9px}
.opt{font-family:var(--fb);font-size:14px;padding:10px 16px;border-radius:999px;border:1px solid var(--line2);background:var(--card2);cursor:pointer;transition:.15s;user-select:none}
.opt:hover{border-color:var(--teal-soft)}
.opt.sel{background:var(--teal);color:#F6F3EC;border-color:var(--teal-deep)}
.chk{display:flex;align-items:center;gap:11px;font-size:15px;color:var(--ink-soft);cursor:pointer;padding:8px 0}
.chk input{width:20px;height:20px;accent-color:var(--teal);cursor:pointer}
.calc-out{position:sticky;top:96px;background:var(--dark);color:var(--dark-ink);border-radius:18px;padding:36px 34px;box-shadow:var(--sh)}
.calc-out .k::before{color:var(--teal-soft)}.calc-out .k{color:var(--dark-soft)}
.calc-out .estlab{font-family:var(--fm);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dark-soft);margin:22px 0 6px}
.calc-out .est{font-family:var(--fd);font-size:clamp(34px,6vw,50px);font-weight:500;line-height:1;letter-spacing:-.01em}
.calc-out .estsub{color:var(--dark-soft);font-size:14px;margin-top:12px;line-height:1.5}
.calc-lines{margin:24px 0;display:flex;flex-direction:column;gap:1px;background:var(--dark-line);border-radius:10px;overflow:hidden}
.calc-line{background:var(--dark2);display:flex;justify-content:space-between;gap:12px;padding:12px 15px;font-size:13.5px}
.calc-line span:first-child{color:var(--dark-soft)}
.calc-line span:last-child{font-family:var(--fm);font-size:12.5px}
.calc-out .btn{width:100%;justify-content:center;margin-top:8px}
.mk-score{display:flex;align-items:center;gap:22px}
.mk-score .ring{width:98px;height:98px;border-radius:50%;background:conic-gradient(var(--teal-soft) 0 var(--p,72%),var(--dark-line) var(--p,72%) 100%);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .4s ease}
.mk-score .ring b{width:74px;height:74px;border-radius:50%;background:var(--dark);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--fd);font-size:27px;color:#fff;font-weight:500}
.mk-score .ring b small{font-family:var(--fm);font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--dark-soft);font-weight:400;margin-top:2px}
.mk-score .est{font-family:var(--fd);font-weight:500}
.calc-disc{font-size:12.5px;color:var(--ink-faint);margin-top:22px;line-height:1.5;max-width:760px}

/* ---- faq ---- */
.faqs{max-width:820px}
.faq{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 0;font-family:var(--fd);font-size:20px;display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--fm);color:var(--teal);font-size:22px;transition:transform .2s}
.faq[open] summary::after{transform:rotate(45deg)}
.faq-a{padding:0 0 24px;color:var(--ink-soft);font-size:16.5px;line-height:1.65;max-width:720px}
.faq-a p+p{margin-top:12px}

/* ---- dark cta band ---- */
.cta{background:var(--dark);color:var(--dark-ink);text-align:center;padding:124px 0;border:none}
.cta .wrap{display:flex;flex-direction:column;align-items:center}
.cta .k{margin-bottom:28px;color:var(--dark-soft)}
.cta h2{font-size:clamp(38px,7vw,78px);font-weight:400}
.cta p{margin:28px auto 0;max-width:520px;color:var(--dark-soft);font-size:18px;line-height:1.6}
.cta-row{display:flex;gap:24px;justify-content:center;align-items:center;margin-top:46px;flex-wrap:wrap}
.cta-row .mono{font-family:var(--fm);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dark-soft)}
.cta-row .mono::before{content:"// ";color:var(--teal-soft)}

/* ---- footer ---- */
footer{background:var(--dark);color:var(--dark-ink);padding:66px 0 40px}
.foot-in{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
@media(max-width:820px){.foot-in{grid-template-columns:1fr 1fr;gap:34px}}
.foot-brand .brand{color:var(--dark-ink)}
.foot-brand .tag{margin-top:14px;font-family:var(--fd);font-style:italic;font-size:19px;color:var(--dark-soft);max-width:26ch;line-height:1.3}
.foot-brand .fmeta{margin-top:14px;font-family:var(--fm);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dark-soft)}
.foot-col h5{font-family:var(--fm);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dark-soft);margin-bottom:16px;font-weight:500}
.foot-col a{display:block;font-size:14.5px;color:var(--dark-ink);opacity:.82;padding:5px 0}
.foot-col a:hover{opacity:1;color:var(--teal-soft)}
.foot-areas{margin-top:44px;padding-top:24px;border-top:1px solid var(--dark-line);font-size:13px;line-height:2;color:var(--dark-soft)}
.foot-areas .fa-label{font-family:var(--fm);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dark-soft);margin-right:8px}
.foot-areas a{color:var(--dark-ink);opacity:.82;margin-right:4px}
.foot-areas a:hover{opacity:1;color:var(--teal-soft)}
.foot-areas a:not(.fa-all)::after{content:" \00b7";color:var(--dark-line);margin-left:4px}
.foot-areas .fa-all{font-family:var(--fm);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-soft);opacity:1;white-space:nowrap}
.foot-base{margin-top:32px;padding-top:24px;border-top:1px solid var(--dark-line);font-family:var(--fm);font-size:10.5px;
  letter-spacing:.08em;color:var(--dark-soft);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;text-transform:uppercase}
.foot-base a{color:var(--dark-soft)}.foot-base a:hover{color:var(--dark-ink)}

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

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.js .reveal{opacity:1;transform:none}html{scroll-behavior:auto}}
@media(max-width:560px){body{font-size:16px}.wrap{padding:0 22px}section,.sec,.cta{padding:72px 0}}
/* On mobile, show the full project screenshots (never crop them) */
@media(max-width:700px){
  .bw>img,.carousel .bw>img{aspect-ratio:auto;height:auto;object-fit:contain}
  .ph{width:200px}
  .ph>img{aspect-ratio:auto;height:auto;object-fit:contain}
  .cs-devices{gap:20px}
}

/* =====================================================================
   Nautical line-art watermarks — subtle cartographic detail.
   Contours (headland), compass rose, lighthouse. Mizen "edge of the map".
   Restraint is the whole point: if it reads as a pattern, it is too strong.
   ===================================================================== */
.hero,.phero,.cta,footer,.sec.alt{position:relative}
.hero,.phero,.cta,footer,.sec.alt{overflow:hidden}
.hero>.wrap,.phero>.wrap,.cta>.wrap,footer>.wrap,.sec.alt>.wrap{position:relative;z-index:1}
.lineart-off .hero::before,.lineart-off .phero::before,.lineart-off .cta::before,
.lineart-off footer::before,.lineart-off .sec.alt::before{display:none}

/* hero: a headland contour bleeding off the top-right */
/* hero: compass and lighthouse, offset and NON-overlapping, in the open right area */
.hero::before{content:"";position:absolute;z-index:0;pointer-events:none;
  right:-40px;top:4px;width:400px;height:400px;opacity:.15;
  background:url(/assets/img/line/compass-ink.svg) no-repeat center/contain}
.hero::after{content:"";position:absolute;z-index:0;pointer-events:none;
  right:200px;bottom:-8px;width:280px;height:420px;opacity:.19;
  background:url(/assets/img/line/lighthouse-ink.svg) no-repeat center bottom/contain}

/* alt bands: faint contour ghosting, alternating corner + mirrored for variety */
.sec.alt::before{content:"";position:absolute;z-index:0;pointer-events:none;
  width:470px;height:470px;opacity:.09;left:-150px;bottom:-150px;
  background:url(/assets/img/line/contour-ink.svg) no-repeat center/contain}
.sec.alt:nth-of-type(even)::before{left:auto;right:-160px;top:-150px;bottom:auto;transform:scaleX(-1)}

/* dark CTA band: a gold compass rose, the navigation motif */
.cta::before{content:"";position:absolute;z-index:0;pointer-events:none;
  right:-120px;top:50%;transform:translateY(-50%);width:560px;height:560px;opacity:.14;
  background:url(/assets/img/line/compass-gold.svg) no-repeat center/contain}

/* footer sign-off: a small lighthouse, the guiding light */
footer::before{content:"";position:absolute;z-index:0;pointer-events:none;
  right:20px;top:-46px;width:300px;height:300px;opacity:.11;
  background:url(/assets/img/line/lighthouse-light.svg) no-repeat center/contain}

/* interior page heroes: a quiet compass in the corner */
.phero::before{content:"";position:absolute;z-index:0;pointer-events:none;
  right:-110px;top:-120px;width:430px;height:430px;opacity:.07;
  background:url(/assets/img/line/compass-ink.svg) no-repeat center/contain}

@media(max-width:640px){
  .hero::before{width:420px;height:420px;right:-150px;top:auto;bottom:-90px;transform:none;opacity:.10}
  .hero::after{display:none}
  .cta::before{width:360px;height:360px;right:-140px;opacity:.11}
  .sec.alt::before,footer::before{display:none}
}

/* --- header: subtle sea-line motif (mirrors the footer's line-art) --- */
.nav-in{position:relative;z-index:1}
header.nav::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.32;
  background:url(/assets/img/line/compass-ink.svg) no-repeat left 250px center,
             url(/assets/img/line/lighthouse-ink.svg) no-repeat left 372px center;
  background-size:auto 80%, auto 108%}
@media(max-width:1040px){header.nav::before{background-position:left 232px center,left 340px center;background-size:auto 74%,auto 100%}}
@media(max-width:900px){header.nav::before{display:none}}

/* --- per-section nautical marks (higher specificity than the .sec.alt default) --- */
.sec.alt[data-mark="compass"]::before{background-image:url(/assets/img/line/compass-ink.svg)}
.sec.alt[data-mark="helm"]::before{background-image:url(/assets/img/line/helm-ink.svg);left:-150px;right:auto;bottom:-150px;top:auto;transform:none}
.sec.alt[data-mark="anchor"]::before{background-image:url(/assets/img/line/anchor-ink.svg);width:400px;height:400px}
.sec.alt[data-mark="contour"]::before{background-image:url(/assets/img/line/contour-ink.svg)}
.sec.alt[data-mark="waves"]::before{background-image:url(/assets/img/line/waves-ink.svg);
  width:760px;height:250px;right:-20px;left:auto;top:auto;bottom:-46px;transform:none;opacity:.07}