:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}body{margin:0}img{max-width:100%}[hidden]{display:none!important}
/* Layout: wide single column, big type, sky-blue accent picked from Cristina's suit; dark bands for rhythm */
:root{
  --bg:#F4F4F1; --surface:#FFFFFF; --ink:#0E1116; --muted:#4D535D; --line:#D9D8D2;
  --accent:#2F5BEA; --accent-ink:#FFFFFF; --sky:#8FB3FF; --tile-a:#DCE4F7; --tile-b:#E8E5DD; --tile-c:#C9D8FF;
  --band:#0E1116; --band-fg:#F4F4F1; --band-muted:#A9AFBA; --photo:#9C9C9A;
  --display:'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --body:'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0E1116; --surface:#161A21; --ink:#F1F2F4; --muted:#A9AFBA; --line:#2A303A;
  --accent:#6E95FF; --accent-ink:#0E1116; --sky:#9DBCFF; --tile-a:#1C2638; --tile-b:#23262C; --tile-c:#1F2E52;
  --band:#06080B; --band-fg:#F1F2F4; --band-muted:#A9AFBA; --photo:#3A3D42; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0E1116; --surface:#161A21; --ink:#F1F2F4; --muted:#A9AFBA; --line:#2A303A;
  --accent:#6E95FF; --accent-ink:#0E1116; --sky:#9DBCFF; --tile-a:#1C2638; --tile-b:#23262C; --tile-c:#1F2E52;
  --band:#06080B; --band-fg:#F1F2F4; --band-muted:#A9AFBA; --photo:#3A3D42; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;letter-spacing:-0.03em}
p{margin:0}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dot{color:var(--accent)}

/* header */
header.site{position:sticky;top:env(safe-area-inset-top, 0px);z-index:20;background:color-mix(in srgb, var(--bg) 88%, transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top, 0px);z-index:21;background:var(--bg)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px}
/* Skyex logo: outlined X with a needle stroke, recreated from Cristina's own mark */
.logo{--mk:var(--ink);--mk-bg:var(--bg);display:flex;align-items:center;gap:0;text-decoration:none;color:var(--ink)}
.mark{flex:none;width:38px;height:41px;display:block;margin-left:-2px}
.wm{font-family:'Josefin Sans', 'Century Gothic', 'Futura', sans-serif;font-weight:300;font-size:19px;line-height:1;letter-spacing:.55em;padding-top:3px}
footer .logo{--mk:var(--band-fg);--mk-bg:var(--band);color:var(--band-fg)}
.contact .wrap{position:relative}
.big-mark{--mk:var(--sky);--mk-bg:var(--band);position:absolute;right:max(16px, env(safe-area-inset-right, 0px));top:50%;transform:translateY(-50%);width:clamp(180px, 22vw, 300px);height:auto;aspect-ratio:191/207;opacity:.9;pointer-events:none}
@media (max-width:900px){.big-mark{display:none}}
@media (min-width:901px){.c-head h2,.c-head > p,.pile{max-width:calc(100% - clamp(200px, 25vw, 330px))}}
.links{display:flex;align-items:center;gap:28px;font-weight:500;font-size:16px}
.links a{text-decoration:none}
.links a:not(.btn):hover{color:var(--accent)}
.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;border-radius:999px;padding:14px 26px;border:1.5px solid transparent;cursor:pointer;font:inherit;font-weight:600;transition:transform .15s ease, background .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:var(--bg)}
.btn-accent{background:var(--accent);color:var(--accent-ink)}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
@media (max-width:720px){.links a:not(.btn){display:none}.btn{padding:12px 20px}}

/* hero */
.hero{display:flex;flex-wrap:wrap;gap:48px;align-items:center;padding-block:48px 88px}
.hero-text{flex:999 1 520px;min-width:0;display:flex;flex-direction:column;gap:28px}
.badge{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 16px 6px 10px;font-size:14px;font-weight:500}
.badge i{width:9px;height:9px;border-radius:50%;background:#1F9D55;box-shadow:0 0 0 4px color-mix(in srgb, #1F9D55 22%, transparent)}
.hero h1{font-weight:800;font-size:clamp(46px, 7.4vw, 108px);line-height:.95}
.hero h1 span{color:var(--accent)}
.lede{font-size:clamp(18px, 1.6vw, 21px);color:var(--muted);max-width:34em}
.lede strong{color:var(--ink);font-weight:600}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero-photo{flex:1 1 340px;min-width:0;max-width:480px;margin-inline:auto;position:relative}
.hero-photo .frame{aspect-ratio:4/5;max-width:100%;border-radius:32px;overflow:hidden;background:var(--photo)}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}
.tag{position:absolute;left:-12px;bottom:28px;background:var(--ink);color:var(--bg);border-radius:16px;padding:12px 18px;font-size:14px;font-weight:600;line-height:1.3}
.tag small{display:block;font-weight:400;opacity:.75}
.spin{position:absolute;right:-14px;top:-14px;width:112px;height:112px;animation:rot 18s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
@media (max-width:520px){.spin{width:88px;height:88px;right:-4px;top:-10px}.tag{left:8px}}

/* strip */
.strip{background:var(--band);color:var(--band-fg);overflow:hidden}
.track{display:flex;gap:36px;align-items:center;white-space:nowrap;padding-block:22px;font-family:var(--display);font-weight:700;font-size:clamp(20px, 2.2vw, 28px);animation:slide 32s linear infinite;width:max-content}
.track svg{flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* sections */
section.block{padding-block:104px}
.head{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between;margin-bottom:44px}
.head > div{display:flex;flex-direction:column;gap:10px}
h2{font-weight:800;font-size:clamp(36px, 5vw, 64px);line-height:1}

/* work */
.grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr));gap:36px 24px}
.card{display:flex;flex-direction:column;gap:14px;text-decoration:none}
.thumb{aspect-ratio:4/3;max-width:100%;border-radius:24px;display:flex;align-items:center;justify-content:center;font-weight:500;color:var(--muted);border:1px dashed var(--line);transition:transform .25s ease}
.card:hover .thumb{transform:translateY(-4px)}
.t1{background:var(--tile-a)}.t2{background:var(--tile-b)}.t3{background:var(--tile-c)}.t4{background:var(--tile-a)}
/* Ferrynex tile: a small brand board, logo shown on three grounds (fixed brand colours) */
.ferry{background:var(--bg);border:0;padding:0;overflow:hidden;display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));grid-template-rows:minmax(0, 2fr) minmax(0, 1fr);gap:8px;align-items:stretch;justify-content:stretch}
.ferry > div{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0}
.ferry img{display:block;height:auto;clip-path:inset(0 1.5% 0 0)}
.f-main{grid-column:1 / -1;background:#0C1E33}
.f-main img{width:74%;filter:invert(1);mix-blend-mode:screen}
.f-cap{position:absolute;left:16px;bottom:12px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#9FB2C8}
.f-light{background:#ECE9E2}
.f-orange{background:#F06A24}
.f-light img,.f-orange img{width:80%;mix-blend-mode:multiply}
/* D'Lure tile: same brand-board layout, in the client's chocolate, gold and blush */
.dlure img{clip-path:none}
.d-main{grid-column:1 / -1;background:#F4EDE4}
.d-main img{width:70%;mix-blend-mode:multiply}
.d-cap{color:#7A5A4C}
.d-dark{background:#3E221D}
.d-dark img{width:auto;height:66%;max-width:80%;filter:grayscale(1) invert(1) contrast(1.3);mix-blend-mode:screen;clip-path:inset(1% 2% 1% 0)}
.d-blush{background:#EFE3D6}
/* Etiago tile */
.etiago img{clip-path:inset(2% 2% 2% 2%)}
.e-main{grid-column:1 / -1;background:#0F3D2E}
.e-main img{width:auto;height:118%;filter:grayscale(1) invert(1);mix-blend-mode:screen}
.e-cap{color:#9CC7B5}
.e-light{background:#ECECE8}
.e-yellow{background:#E8B931}
.e-light img,.e-yellow img{width:auto;height:118%;mix-blend-mode:multiply}
.d-cap-dark{left:12px;bottom:10px;color:#D9C2AE;letter-spacing:.14em}
.desc{color:var(--muted);font-size:15.5px;line-height:1.55;max-width:44em;margin-top:-4px}
.d-blush img{width:80%;mix-blend-mode:multiply}
.meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.meta strong{font-family:var(--display);font-size:24px;letter-spacing:-0.02em}
.meta span{color:var(--muted);font-size:15px}
.visit{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15px;color:var(--accent);margin-top:-4px}
.card:hover .visit{text-decoration:underline}
/* NAILOGY tile: drawn in the client's own brand palette (fixed, not themed) */
.nailogy{background:#E4DCCB;border:0;padding:clamp(16px, 4%, 32px);align-items:stretch;justify-content:stretch}
.n-frame{flex:1;display:flex;flex-direction:column;background:#F7F4EE;box-shadow:0 18px 40px -18px rgba(90,58,42,.45);min-width:0}
.n-bar{display:flex;justify-content:space-between;align-items:center;height:30px;padding:0 12px;border-bottom:1px solid #5A3A2A26;font-family:'Archivo', 'Arial Black', sans-serif;font-stretch:125%;font-weight:800;font-size:10px;letter-spacing:.12em;color:#5A3A2A}
.n-bar i{width:14px;height:2px;background:#5A3A2A;box-shadow:0 4px 0 #5A3A2A,0 -4px 0 #5A3A2A}
.n-hero{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:10px;padding:0 clamp(14px, 6%, 32px);background:#F7F4EE}
.n-word{font-family:'Archivo', 'Arial Black', sans-serif;font-stretch:125%;font-weight:800;font-size:clamp(30px, 5.2vw, 58px);line-height:.9;letter-spacing:-0.02em;color:#5A3A2A}
.n-tag{font-family:'Manrope', system-ui, sans-serif;font-weight:500;font-size:clamp(12px, 1.2vw, 15px);color:#5A3A2A}
.n-btn{background:#5A3A2A;color:#FFFFFF;font-family:'Archivo', 'Arial Black', sans-serif;font-stretch:125%;font-weight:800;font-size:10px;letter-spacing:.12em;padding:9px 14px}
.n-sw{display:flex;height:16px}
.n-sw b{flex:1}

/* services */
.services{border-top:1.5px solid var(--ink)}
.svc{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1.2fr);gap:8px 40px;padding-block:30px;border-bottom:1px solid var(--line);align-items:baseline}
.svc h3{font-weight:700;font-size:clamp(24px, 2.6vw, 32px)}
.svc p{color:var(--muted)}
@media (max-width:720px){.svc{grid-template-columns:minmax(0,1fr)}}

/* about */
.about{background:var(--surface)}
.about-in{display:flex;flex-wrap:wrap;gap:56px;align-items:center}
.about-photo{flex:1 1 320px;min-width:0;max-width:440px;margin-inline:auto;aspect-ratio:4/5;border-radius:32px;overflow:hidden;background:var(--photo)}
.about-photo img{width:100%;height:100%;object-fit:cover;object-position:center 12%;display:block}
.about-text{flex:999 1 460px;min-width:0;display:flex;flex-direction:column;gap:20px}
.about-text p{font-size:19px;color:var(--muted);max-width:34em}
.ph{color:var(--accent);font-style:italic}
.about-text p.pull{font-family:var(--display);font-weight:700;font-size:clamp(24px, 2.6vw, 32px);line-height:1.15;letter-spacing:-0.02em;color:var(--accent);text-wrap:balance}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:500}

/* process */
.steps{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr));gap:24px}
.step{display:flex;flex-direction:column;gap:10px;padding-top:20px;border-top:1.5px solid var(--ink)}
.step b{font-family:var(--display);font-size:15px;color:var(--accent)}
.step h3{font-size:24px;font-weight:700}
.step p{color:var(--muted)}

/* contact */
.contact{background:var(--band);color:var(--band-fg)}
.contact .wrap{display:flex;flex-direction:column;gap:56px;padding-block:112px}
.c-head{position:relative;display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.contact .eyebrow{color:var(--band-muted)}
.contact h2{font-size:clamp(44px, 7.4vw, 112px);line-height:.95}
.contact h2 span{color:var(--sky)}
.c-head > p{color:var(--band-muted);font-size:19px;max-width:30em}
.pile{display:flex;flex-wrap:wrap;gap:10px 6px;padding-top:8px}
.pile span{border-radius:999px;padding:8px 16px;font-family:var(--display);font-weight:700;font-size:15px;background:color-mix(in srgb, var(--band-fg) 10%, transparent);color:var(--band-fg);border:1px solid color-mix(in srgb, var(--band-fg) 18%, transparent)}
.pile span:nth-child(odd){transform:rotate(-4deg)}
.pile span:nth-child(3n){transform:rotate(5deg)}
.pile span.a{background:var(--sky);color:#0E1116;border-color:var(--sky)}
.c-grid{display:flex;flex-wrap:wrap;gap:24px;align-items:stretch}
.cform{flex:999 1 520px;min-width:0;display:flex;flex-direction:column;gap:18px}
.row{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr));gap:18px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field label{font-size:15px;font-weight:600;color:var(--band-fg)}
.field input,.field select,.field textarea{font:inherit;font-size:16px;color:var(--band-fg);background:color-mix(in srgb, var(--band-fg) 7%, transparent);border:1px solid color-mix(in srgb, var(--band-fg) 22%, transparent);border-radius:14px;padding:13px 16px;width:100%;min-width:0}
.field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--band-muted) 50%),linear-gradient(135deg, var(--band-muted) 50%, transparent 50%);background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.field select option{color:#0E1116;background:#FFFFFF}
.field textarea{resize:vertical;min-height:140px}
.field input::placeholder,.field textarea::placeholder{color:var(--band-muted);opacity:.8}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--sky);outline-offset:1px;border-color:transparent}
.send{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.btn-sky{background:var(--sky);color:#0E1116}
.status{font-size:15px;color:var(--band-muted);max-width:36em}
.status.ok{color:var(--sky)}
.status.err{color:#FFB4A6}
.c-card{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:28px;border-radius:24px;padding:28px;background:color-mix(in srgb, var(--band-fg) 7%, transparent);border:1px solid color-mix(in srgb, var(--band-fg) 14%, transparent)}
.c-card h3{font-size:20px;color:var(--sky);margin-bottom:10px}
.c-card p{color:var(--band-muted)}
.mail{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.mail a{font-family:var(--display);font-weight:700;font-size:20px;text-decoration:none;color:var(--band-fg);border-bottom:2px solid var(--sky);word-break:break-all}
.copy{background:transparent;color:var(--band-fg);border:1.5px solid var(--band-muted);border-radius:999px;padding:8px 16px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.copy:hover{border-color:var(--band-fg)}
.socials{display:flex;gap:10px}
.socials a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--sky);color:#0E1116;transition:transform .15s ease}
.socials a:hover{transform:translateY(-2px)}
footer{background:var(--band);color:var(--band-muted);border-top:1px solid color-mix(in srgb, var(--band-muted) 25%, transparent)}
footer a{text-decoration:none;color:var(--band-fg)}
footer a:hover{color:var(--sky)}
.f-top{display:flex;flex-wrap:wrap;gap:40px 64px;padding-block:64px 40px}
.f-brand{flex:2 1 280px;display:flex;flex-direction:column;gap:20px}
.f-tag{font-family:var(--display);font-weight:700;font-size:clamp(26px, 3vw, 36px);line-height:1.1;letter-spacing:-0.02em;color:var(--band-fg)}
.f-col{flex:1 1 160px;display:flex;flex-direction:column;gap:10px;font-size:15px}
.f-col h3{font-size:16px;color:var(--sky);margin-bottom:6px}
.f-bottom{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;padding-block:22px;font-size:14px;border-top:1px solid color-mix(in srgb, var(--band-muted) 20%, transparent)}

/* header extras */
.icon-btn{width:44px;height:44px;border-radius:50%;display:inline-grid;place-items:center;background:transparent;color:var(--ink);border:1.5px solid var(--line);cursor:pointer;flex:none}
.icon-btn:hover{border-color:var(--ink)}
.i-sun{display:none}
:root[data-theme="dark"] .i-sun{display:block}:root[data-theme="dark"] .i-moon{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .i-sun{display:block}:root:not([data-theme="light"]) .i-moon{display:none}}
.menu-btn{display:none}
.mnav{border-top:1px solid var(--line);background:var(--bg)}
.mnav .wrap{display:flex;flex-direction:column;padding-block:8px 16px}
.mnav a{text-decoration:none;font-family:var(--display);font-weight:700;font-size:24px;padding-block:10px;border-bottom:1px solid var(--line)}
@media (max-width:720px){.menu-btn{display:inline-grid}.links{gap:10px}.links .btn{display:none}}
@media (min-width:721px){.mnav{display:none}}

/* project filters + case studies */
.filters{display:flex;flex-wrap:wrap;gap:8px}
.chip-btn{font:inherit;font-size:15px;font-weight:600;border-radius:999px;padding:10px 18px;border:1.5px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.chip-btn:hover{border-color:var(--ink)}
.chip-btn[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.acts{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center}
.case-btn{font:inherit;font-size:15px;font-weight:600;border:0;border-radius:999px;padding:10px 18px;background:var(--ink);color:var(--bg);cursor:pointer}
.case-btn:hover{background:var(--accent);color:var(--accent-ink)}
.acts .visit{margin:0;text-decoration:none}
.empty{color:var(--muted);padding-block:24px}
dialog.case{width:min(960px, calc(100% - 32px));max-height:calc(100% - 32px);border:0;border-radius:28px;padding:0;background:var(--surface);color:var(--ink)}
dialog.case::backdrop{background:rgba(6,8,11,.62);backdrop-filter:blur(4px)}
.case-in{position:relative;display:flex;flex-direction:column;gap:18px;padding:clamp(20px, 4vw, 40px)}
.case-in h2{font-size:clamp(32px, 5vw, 52px);padding-right:56px}
.case-close{position:absolute;top:16px;right:16px}
.case-vis .thumb{aspect-ratio:16/9;max-width:100%}
.case-vis .thumb:hover{transform:none}
.case-grid{display:flex;flex-wrap:wrap;gap:24px 40px;padding-top:8px}
.case-text{flex:999 1 380px;min-width:0;display:flex;flex-direction:column;gap:14px;color:var(--muted);font-size:17px}
.case-facts{flex:1 1 240px;min-width:0;margin:0;display:flex;flex-direction:column;gap:14px;background:var(--band);color:var(--band-fg);border-radius:20px;padding:22px}
.case-facts dt{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--band-muted)}
.case-facts dd{margin:2px 0 0;font-weight:600}
.case-facts a{color:var(--sky)}

/* accordions: services + FAQ */
.acc{display:flex;flex-direction:column;gap:12px}
.acc details{border-radius:22px;background:var(--surface);border:1px solid var(--line);transition:background .2s ease}
.acc summary{list-style:none;display:flex;align-items:center;gap:14px;padding:22px 24px;cursor:pointer}
.acc summary::-webkit-details-marker{display:none}
.acc summary h3{flex:1;font-weight:700;font-size:clamp(20px, 2.2vw, 28px)}
.plus{flex:none;width:36px;height:36px;border-radius:50%;background:var(--accent);position:relative}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;background:var(--accent-ink);transform:translate(-50%,-50%);transition:transform .2s ease}
.plus::after{transform:translate(-50%,-50%) rotate(90deg)}
details[open] .plus::after{transform:translate(-50%,-50%) rotate(0deg)}
.new{flex:none;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--sky);color:#0E1116}
.acc details[open]{background:var(--band);color:var(--band-fg);border-color:var(--band)}
.acc-body{padding:0 24px 24px;display:flex;flex-direction:column;gap:14px}
.acc-body p{color:var(--band-muted);max-width:52em}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags span{font-size:14px;font-weight:500;padding:6px 14px;border-radius:999px;border:1px solid color-mix(in srgb, var(--band-fg) 25%, transparent)}
.faq-in{display:flex;flex-wrap:wrap;gap:40px 56px;align-items:flex-start}
.faq-side{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:18px}
.ask{display:flex;flex-direction:column;gap:16px;align-items:flex-start;border-radius:24px;padding:24px;background:var(--tile-a);margin-top:8px}
.ask p{color:var(--ink)}
.faq-list{flex:999 1 480px;min-width:0}

/* ---- multi-page additions ---- */
.links a[aria-current="page"]:not(.btn){color:var(--accent)}
.links a[aria-current="page"]:not(.btn)::after{content:"";display:block;height:2px;background:var(--accent);border-radius:2px;margin-top:2px}
.mnav a[aria-current="page"]{color:var(--accent)}
.page-head{padding-block:56px 48px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.page-head h1{font-weight:800;font-size:clamp(44px, 7vw, 92px);line-height:.95}
.page-head h1 span{color:var(--accent)}
.page-head p.lead{color:var(--muted);font-size:19px;max-width:36em}
.crumbs{display:flex;gap:8px;font-size:15px;color:var(--muted)}
.crumbs a{text-decoration:none;color:var(--ink)}
.crumbs a:hover{color:var(--accent)}
.crumbs span[aria-current]{color:var(--accent)}
.more{font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.more:hover{color:var(--accent)}
.svc-teaser{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr));gap:16px}
.svc-teaser a{display:flex;justify-content:space-between;align-items:center;gap:16px;text-decoration:none;border-radius:22px;padding:24px;background:var(--surface);border:1px solid var(--line);font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-0.02em;transition:background .2s ease, color .2s ease}
.svc-teaser a:hover{background:var(--band);color:var(--band-fg);border-color:var(--band)}
.svc-teaser a .plus{background:var(--accent)}
.svc-teaser a .plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.about-teaser .about-text p{font-size:18px}
.cta{background:var(--band);color:var(--band-fg)}
.cta .wrap{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:24px;padding-block:96px}
.cta .eyebrow{color:var(--band-muted)}
.cta h2{font-size:clamp(40px, 6.4vw, 96px);line-height:.95}
.cta h2 span{color:var(--sky)}
.cta p{color:var(--band-muted);font-size:19px;max-width:30em}
.cta .big-mark{top:50%}
@media (min-width:901px){.cta h2,.cta p,.cta .pile{max-width:calc(100% - clamp(200px, 25vw, 330px))}}
.contact.page .wrap{padding-block:72px 112px}
.case-hero .thumb{aspect-ratio:16/9;max-width:100%;border-radius:28px}
.case-hero .thumb:hover{transform:none}
.case-body{display:flex;flex-wrap:wrap;gap:32px 56px;padding-block:56px 104px}
.case-body .case-text{flex:999 1 420px;min-width:0;display:flex;flex-direction:column;gap:18px;font-size:18px;color:var(--muted)}
.case-body .case-text h2{font-size:clamp(28px, 3.4vw, 40px);color:var(--ink)}
.case-body .case-facts{flex:1 1 280px;min-width:0;align-self:flex-start}
.next{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-block:28px;border-top:1px solid var(--line);margin-bottom:104px}
.next a{text-decoration:none;font-family:var(--display);font-weight:700;font-size:clamp(22px, 2.6vw, 30px)}
.next a:hover{color:var(--accent)}
.next small{display:block;font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.prototype{display:flex;flex-wrap:wrap;gap:32px 56px;align-items:center;border-radius:32px;padding:clamp(24px, 5vw, 56px);background:var(--tile-a)}
.prototype > div{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:16px}
.prototype h2{font-size:clamp(32px, 4.4vw, 56px)}
.prototype p{color:var(--muted);font-size:18px}
.proto-vis{flex:1 1 300px;display:flex;gap:14px;justify-content:center;align-items:flex-end}
.screen{background:var(--surface);border:1.5px solid var(--ink);border-radius:18px;padding:12px;display:flex;flex-direction:column;gap:8px}
.screen.desk{width:min(100%, 300px);aspect-ratio:16/11}
.screen.phone{width:96px;aspect-ratio:9/18;border-radius:20px}
.screen i{display:block;height:10px;border-radius:5px;background:var(--line)}
.screen i.a{background:var(--accent);width:45%}
.screen i.s{width:70%}
.screen b{flex:1;border-radius:10px;background:var(--tile-c)}
.values{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr));gap:20px}
.values div{border-radius:24px;padding:28px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.values h3{font-size:24px;font-weight:700}
.values p{color:var(--muted)}
.notfound{padding-block:96px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
/* "Let's work" badge: a real link; only the lettering turns, the arrow stays still */
.spin{animation:none;display:block;border-radius:50%;text-decoration:none;transition:transform .2s ease}
.spin .ring{display:block;width:100%;height:100%;animation:rot 18s linear infinite}
.spin-c{position:absolute;left:50%;top:50%;width:32%;height:32%;transform:translate(-50%,-50%);border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;transition:transform .2s ease}
.spin-c svg{width:55%;height:55%}
.spin:hover .spin-c,.spin:focus-visible .spin-c{transform:translate(-50%,-50%) scale(1.15)}
.spin:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
/* NAILOGY mini homepage: size the wordmark to its own box, not the screen */
.n-frame{container-type:inline-size;overflow:hidden}
.n-hero{min-width:0}
.n-word{font-size:12.5cqi;max-width:100%}
.n-tag{font-size:clamp(11px, 3cqi, 18px)}
/* Kingfisher brochure tile + page gallery */
.kf{background:#E9E4D8;border:0;position:relative;overflow:hidden;display:block}
.kf img{position:absolute;width:34%;aspect-ratio:911/1288;object-fit:cover;box-shadow:0 18px 36px -14px rgba(10,40,32,.55);border-radius:4px}
.kf-b{left:52%;top:16%;transform:rotate(9deg)}
.kf-m{left:34%;top:11%;transform:rotate(3deg)}
.kf-f{left:15%;top:8%;transform:rotate(-5deg)}
.kf-cap{color:#5C5444}
.pmu{background:#5A0F1C;border:0;padding:clamp(16px, 5%, 36px);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.browser{width:100%;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 22px 44px -18px rgba(0,0,0,.6)}
.bbar{display:flex;gap:5px;padding:7px 10px;background:#EFE7E8}
.bbar i{width:8px;height:8px;border-radius:50%;background:#C9B5B8}
.browser img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.pmu-cap{color:#F3C9CF}
.hint{color:var(--muted);font-size:15px}
.screens{display:grid;grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr));gap:24px}
.screens figure{margin:0;display:flex;flex-direction:column;gap:10px}
.scr{height:440px;overflow-y:auto;border-radius:12px;border:1px solid var(--line);background:#5A0F1C;box-shadow:0 12px 30px -16px rgba(0,0,0,.45);overscroll-behavior:contain}
.scr img{display:block;width:100%;height:auto}
.screens figcaption{font-size:14px;color:var(--muted)}
.platforms{display:flex;flex-wrap:wrap;gap:32px 56px;align-items:center;border-radius:32px;padding:clamp(24px, 5vw, 56px);background:var(--band);color:var(--band-fg)}
.platforms > div{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:16px}
.platforms h2{font-size:clamp(32px, 4.4vw, 56px)}
.platforms h2 span{color:var(--sky)}
.platforms p{color:var(--band-muted);font-size:18px}
.plat-list{flex:1 1 320px;display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px}
.plat-list span{border-radius:16px;padding:18px 20px;background:color-mix(in srgb, var(--band-fg) 8%, transparent);border:1px solid color-mix(in srgb, var(--band-fg) 16%, transparent);font-family:var(--display);font-weight:700;font-size:20px}
.plat-list span.more-p{grid-column:1 / -1;background:var(--sky);color:#0E1116;border-color:var(--sky);text-align:center}
.see-more{display:flex;justify-content:center;padding-top:40px}
.ml{background:#DDE6EA}
.ml-cap{color:#2E4552}
.case-hero .kf img{width:28%}
.pages-sec{padding-bottom:56px}
.pages{display:grid;grid-template-columns:repeat(auto-fill, minmax(min(100%, 220px), 1fr));gap:20px}
.pages figure{margin:0;display:flex;flex-direction:column;gap:10px}
.pages img{width:100%;aspect-ratio:911/1288;object-fit:cover;border-radius:6px;box-shadow:0 10px 28px -14px rgba(0,0,0,.4);display:block;background:var(--photo)}
.pages figcaption{font-size:14px;color:var(--muted)}
/* keep each logo inside its own colour panel (stops dark edges bleeding into the gaps) */
.ferry > div{overflow:hidden}
/* wider nav: switch to the menu button earlier */
@media (max-width:1000px){.links a:not(.btn){display:none}.menu-btn{display:inline-grid}.links{gap:10px}}
@media (min-width:721px) and (max-width:1000px){.mnav:not([hidden]){display:block}}
/* events */
.event{display:flex;flex-wrap:wrap;gap:40px 56px;align-items:flex-start}
.event-text{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:18px}
@media (min-width:1000px){.event-text{position:sticky;top:calc(env(safe-area-inset-top, 0px) + 96px);align-self:flex-start}}
.event-text h2{font-size:clamp(34px, 4.6vw, 60px)}
.event-text p{color:var(--muted);font-size:18px}
.event-text blockquote{margin:0;padding:20px 24px;border-radius:20px;background:var(--band);color:var(--band-fg);font-family:var(--display);font-weight:800;font-size:clamp(22px, 2.4vw, 30px);line-height:1.1;letter-spacing:-0.02em;text-transform:uppercase}
.event-text blockquote small{display:block;margin-top:10px;font-family:var(--body);font-weight:500;font-size:14px;letter-spacing:0;text-transform:none;color:var(--band-muted)}
.badge-role{align-self:flex-start;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 14px;border-radius:999px;background:var(--accent);color:var(--accent-ink)}
.gallery{flex:999 1 520px;min-width:0;display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:14px}
.gallery figure{margin:0;border-radius:24px;overflow:hidden;background:var(--photo)}
.gallery img{width:100%;height:100%;object-fit:cover;display:block}
.gallery .tall{grid-row:span 2}
.gallery .wide{grid-column:1 / -1;aspect-ratio:3/2}
.gallery .sq{aspect-ratio:4/5}
@media (max-width:560px){.gallery{grid-template-columns:minmax(0, 1fr)}.gallery .tall{grid-row:auto;aspect-ratio:2/3}}
.soon{border:1.5px dashed var(--line);border-radius:24px;padding:28px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
.soon p{color:var(--muted);max-width:36em}
.seen{display:flex;flex-wrap:wrap;gap:32px 56px;align-items:center;border-radius:32px;overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.seen img{flex:1 1 320px;min-width:0;max-width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.seen > div{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:14px;padding:clamp(24px, 4vw, 48px)}
.seen h2{font-size:clamp(30px, 4vw, 48px)}
.seen p{color:var(--muted);font-size:18px}


/* one-file site: pages switch with CSS, no script needed */
.view{display:none}
.view:target{display:block}
main:not(:has(.view:target)) #p-index{display:block}
.view{scroll-margin-top:0}
/* phone/tablet: show the page links as a scrolling row instead of a menu button */
.menu-btn{display:none!important}
@media (max-width:1000px){
  .mnav{display:block!important;border-top:1px solid var(--line)}
  .mnav .wrap{flex-direction:row;gap:22px;overflow-x:auto;padding-block:10px;scrollbar-width:none}
  .mnav .wrap::-webkit-scrollbar{display:none}
  .mnav a{font-family:var(--body);font-weight:600;font-size:16px;padding:6px 0;border:0;white-space:nowrap}
}
@media (min-width:1001px){.mnav{display:none!important}}

/* work filters: keep the chips in a wrapping row (.head > div stacks its children) */
.head > .filters{flex-direction:row;gap:8px}
@media (max-width:720px){.head > .filters{flex-wrap:nowrap;overflow-x:auto;width:100%;scrollbar-width:none;padding-bottom:2px}.head > .filters::-webkit-scrollbar{display:none}.chip-btn{flex:none}}