/* Fennec & Roque — site styles
   Layout: Gehl-style editorial grid. A narrow left rail (3/12) carries labels and small marks,
   the body (9/12) carries large statements. Sections recolor the whole page as you scroll. */

:root{
  /* Brand palette (official hex) */
  --cream:#f8ebd9;
  --blush:#f9d6c2;
  --terra:#933115;
  --orange:#e5623c;
  --coral:#ec6044;
  --ink:#272727;

  /* Page state, swapped per section by JS */
  --bg:var(--cream);
  --fg:var(--ink);
  --accent:var(--terra);
  --line:rgba(39,39,39,.16);
  --muted:rgba(39,39,39,.62);

  --sans:'Josefin Sans',"Futura","Century Gothic","Avenir Next",system-ui,sans-serif;
  --serif:'Newsreader',"Iowan Old Style","Palatino Linotype",Georgia,serif;

  --gutter:clamp(16px,4vw,56px);
  --maxw:1440px;
  --header-h:76px;
  --ease:cubic-bezier(.65,0,.35,1);
  --ease-out:cubic-bezier(.2,.7,.2,1);

  /* Type scale */
  --t-display:clamp(40px,6.2vw,92px);
  --t-h1:clamp(34px,4.4vw,64px);
  --t-h2:clamp(28px,3.2vw,46px);
  --t-h3:clamp(20px,1.7vw,26px);
  --t-body:clamp(17px,1.25vw,19px);
  --t-small:14px;
  --t-label:12px;
  color-scheme:light;
}

/* Section color themes (applied to body by JS, and locally to each section for no-JS) */
body[data-bg="cream"],html:not(.js) section[data-bg="cream"],.theme-cream{--bg:var(--cream);--fg:var(--ink);--accent:var(--terra);--line:rgba(39,39,39,.16);--muted:rgba(39,39,39,.62)}
body[data-bg="blush"],html:not(.js) section[data-bg="blush"],.theme-blush{--bg:var(--blush);--fg:var(--ink);--accent:var(--terra);--line:rgba(39,39,39,.18);--muted:rgba(39,39,39,.64)}
body[data-bg="terra"],html:not(.js) section[data-bg="terra"],.theme-terra{--bg:var(--terra);--fg:var(--cream);--accent:var(--blush);--line:rgba(248,235,217,.24);--muted:rgba(248,235,217,.74)}
body[data-bg="ink"],html:not(.js) section[data-bg="ink"],.theme-ink{--bg:var(--ink);--fg:var(--cream);--accent:var(--coral);--line:rgba(248,235,217,.18);--muted:rgba(248,235,217,.66)}
body[data-bg="orange"],html:not(.js) section[data-bg="orange"],.theme-orange{--bg:var(--orange);--fg:var(--ink);--accent:var(--terra);--line:rgba(39,39,39,.2);--muted:rgba(39,39,39,.7)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--serif);font-size:var(--t-body);line-height:1.5;
  transition:background-color .7s var(--ease),color .7s var(--ease);
  -webkit-font-smoothing:antialiased;
}
html:not(.js) section[data-bg]{background:var(--bg);color:var(--fg)}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--orange);color:var(--cream)}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px)}
.rail{grid-column:1 / span 3;min-width:0}
.body{grid-column:4 / span 9;min-width:0}
.body--wide{grid-column:4 / -1}
@media (max-width:900px){
  .rail,.body,.body--wide{grid-column:1 / -1}
}

/* Typography */
.label{font-family:var(--sans);font-size:var(--t-label);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.display,.h1,.h2,.h3{font-family:var(--sans);font-weight:400;text-wrap:balance;margin:0}
.display{font-size:var(--t-display);line-height:.98;letter-spacing:-.01em}
.h1{font-size:var(--t-h1);line-height:1.04;letter-spacing:-.005em}
.h2{font-size:var(--t-h2);line-height:1.08}
.h3{font-size:var(--t-h3);line-height:1.2;font-weight:600}
.lede{font-size:clamp(19px,1.6vw,23px);line-height:1.45;max-width:38ch;margin:0}
.prose p{max-width:62ch;margin:0 0 1em}
.prose p:last-child{margin-bottom:0}
.accent{color:var(--accent)}
em.mark{font-style:normal;position:relative;white-space:nowrap;color:var(--accent)}
em.mark svg{position:absolute;left:-2%;bottom:-.18em;width:104%;height:.36em;overflow:visible}
em.mark path{fill:none;stroke:var(--orange);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease) .5s}
em.mark.is-in path,html:not(.js) em.mark path{stroke-dashoffset:0}
.todo{background:color-mix(in srgb,var(--orange) 22%,transparent);border-bottom:1px dashed var(--orange);padding:0 .15em;font-style:italic}

/* Line reveal */
.lines{display:block}
.lines .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.lines .ln > span{display:inline-block;transition:transform 1s var(--ease-out),opacity 1s var(--ease-out)}
html.js .lines:not(.is-in) .ln > span{transform:translateY(105%);opacity:0}
.lines .ln:nth-child(2) > span{transition-delay:.08s}
.lines .ln:nth-child(3) > span{transition-delay:.16s}
.lines .ln:nth-child(4) > span{transition-delay:.24s}
.lines .ln:nth-child(5) > span{transition-delay:.32s}
.lines .ln:nth-child(6) > span{transition-delay:.4s}
[data-reveal]{transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
html.js [data-reveal]:not(.is-in){opacity:0;transform:translateY(24px)}

/* Buttons and links */
.btn{display:inline-flex;align-items:center;gap:.7em;font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;border:1px solid currentColor;border-radius:999px;padding:15px 24px 13px;transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s}
.btn:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn--solid{background:var(--accent);border-color:var(--accent);color:var(--bg)}
body[data-bg="terra"] .btn--solid,body[data-bg="ink"] .btn--solid{color:var(--terra)}
.btn--solid:hover{background:var(--fg);border-color:var(--fg)}
.arrow{display:inline-block;transition:transform .35s var(--ease)}
a:hover .arrow{transform:translateX(5px)}
.link{font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;display:inline-flex;gap:.6em;align-items:center;padding-block:6px;background:linear-gradient(currentColor,currentColor) 0 100%/0% 1px no-repeat;transition:background-size .45s var(--ease)}
.link:hover{background-size:100% 1px}

/* Header */
.header{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--header-h);padding-top:env(safe-area-inset-top,0px);transition:transform .5s var(--ease),background-color .7s var(--ease),color .5s}
.header .container{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.header.is-hidden{transform:translateY(-100%)}
.header.is-solid{background:var(--bg)}
.header.on-hero{color:var(--cream)}
.header__logo{display:block;width:clamp(150px,15vw,200px);color:inherit}
.header__logo svg{width:100%;height:auto;display:block}
.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,40px)}
.nav a{font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;position:relative;padding-block:8px}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:currentColor;transition:right .45s var(--ease)}
.nav a:not(.btn):hover::after,.nav a[aria-current="page"]::after{right:0}
.nav .btn{padding:11px 18px 9px}
.menu-btn{display:none;background:none;border:0;color:inherit;font:600 13px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;padding:12px 0;cursor:pointer}
@media (max-width:900px){
  .nav{display:none}
  .menu-btn{display:block}
}
.mobile-menu{position:fixed;inset:0;z-index:60;background:var(--terra);color:var(--cream);display:flex;flex-direction:column;padding:calc(var(--header-h) + 24px) var(--gutter) 40px;transform:translateY(-100%);transition:transform .6s var(--ease);visibility:hidden}
.mobile-menu.is-open{transform:none;visibility:visible}
.mobile-menu a{font-family:var(--sans);font-size:clamp(34px,9vw,52px);text-decoration:none;line-height:1.25}
.mobile-menu .close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 22px);right:var(--gutter);background:none;border:0;color:inherit;font:600 13px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;padding:12px 0;cursor:pointer}
.mobile-menu .foot{margin-top:auto;font-family:var(--sans);font-size:14px;letter-spacing:.06em;opacity:.8}

/* Sections */
.section{padding-block:clamp(72px,11vw,160px)}
.section--tight{padding-block:clamp(48px,7vw,96px)}
.section-head{display:grid;gap:18px;margin-bottom:clamp(36px,5vw,64px)}
.rail .mark-ill{width:min(150px,60%);color:var(--accent);margin-top:8px}
.rail .mark-ill svg{width:100%;height:auto}
@media (max-width:900px){.rail .mark-ill{width:84px;margin-bottom:24px}}
.stack{display:grid;gap:28px}

/* Hero (home) */
.hero{position:relative;height:min(100svh,980px);min-height:560px;color:var(--cream);overflow:hidden;background:var(--ink)}
.hero__slides{position:absolute;inset:0}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s var(--ease)}
.hero__slide.is-active{opacity:1}
.hero__slide .ph{position:absolute;inset:0;height:100%}
.hero__slide .ph > *{transform:scale(1.06);transition:transform 7s linear}
.hero__slide.is-active .ph > *{transform:scale(1)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(39,39,39,.35) 0%,rgba(39,39,39,0) 30%,rgba(39,39,39,.05) 55%,rgba(39,39,39,.62) 100%);pointer-events:none}
.hero__content{position:absolute;inset:auto 0 0 0;z-index:2;padding-bottom:clamp(32px,6vw,72px)}
.hero__content .grid{align-items:end;row-gap:28px}
.hero__title{grid-column:1 / span 8}
.hero__aside{grid-column:9 / -1;display:grid;gap:22px;justify-items:start}
.hero__aside p{margin:0;font-size:clamp(17px,1.3vw,20px);max-width:32ch}
.hero__dots{display:flex;gap:10px;margin-top:6px}
.hero__dot{width:44px;height:2px;background:rgba(248,235,217,.35);border:0;padding:0;position:relative;cursor:pointer;overflow:hidden}
.hero__dot::after{content:"";position:absolute;inset:0;background:var(--cream);transform:scaleX(0);transform-origin:left}
.hero__dot.is-active::after{animation:dot 6s linear forwards}
@keyframes dot{to{transform:scaleX(1)}}
.hero__caption{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.85}
@media (max-width:900px){.hero__title,.hero__aside{grid-column:1 / -1}}

/* Page hero (inner pages) */
.page-hero{padding-top:calc(var(--header-h) + clamp(56px,9vw,140px));padding-bottom:clamp(48px,7vw,96px)}
.page-hero .grid{row-gap:24px;align-items:start}

/* Photo placeholders: replace with <img> when photos arrive */
.ph{position:relative;margin:0;overflow:hidden;background:var(--ph-bg,#e9c3ad);color:var(--ph-fg,rgba(147,49,21,.72));aspect-ratio:var(--ar,4/3);width:100%;max-width:100%}
.ph img{width:100%;height:100%;object-fit:cover}
.ph__art{position:absolute;inset:0;background:
   linear-gradient(var(--ph-fg),var(--ph-fg)) 18% 0/1px 100% no-repeat,
   linear-gradient(var(--ph-fg),var(--ph-fg)) 0 72%/100% 1px no-repeat,
   repeating-linear-gradient(135deg,transparent 0 22px,color-mix(in srgb,var(--ph-fg) 22%,transparent) 22px 23px);opacity:.5}
.ph__label{position:absolute;left:16px;bottom:14px;right:16px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;display:flex;justify-content:space-between;gap:12px}
.ph--a{--ph-bg:#efc9b3;--ph-fg:rgba(147,49,21,.7)}
.ph--b{--ph-bg:#d9a58b;--ph-fg:rgba(39,39,39,.55)}
.ph--c{--ph-bg:#b8664a;--ph-fg:rgba(248,235,217,.7)}
.ph--d{--ph-bg:#5b3529;--ph-fg:rgba(248,235,217,.6)}
.ph--e{--ph-bg:#e8dccb;--ph-fg:rgba(39,39,39,.5)}

/* Horizontal carousel (projects) */
.rail-scroller{position:relative}
.carousel{display:flex;gap:clamp(14px,1.8vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:var(--gutter);padding-bottom:12px;scrollbar-width:none;overscroll-behavior-x:contain;align-items:flex-start}
.carousel::-webkit-scrollbar{display:none}
.carousel.is-dragging{scroll-snap-type:none;cursor:grabbing}
.carousel.is-dragging a{pointer-events:none}
.card{flex:0 0 auto;scroll-snap-align:start;text-decoration:none;color:inherit;display:grid;gap:14px;width:clamp(260px,26vw,400px)}
.card--wide{width:clamp(300px,40vw,620px)}
.card .ph{--ar:3/4;transition:border-radius .7s var(--ease)}
.card--wide .ph{--ar:4/3}
.card .ph > *{transition:transform 1.1s var(--ease)}
.card:hover .ph{border-radius:220px}
.card:hover .ph > *{transform:scale(1.04)}
.card__meta{display:grid;gap:6px}
.card__credit{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.card__title{font-family:var(--sans);font-size:clamp(20px,1.7vw,26px);line-height:1.15}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:6px 10px 4px}
.carousel-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:28px}
.progress{flex:1;height:1px;background:var(--line);position:relative;max-width:420px}
.progress span{position:absolute;inset:0 auto 0 0;background:var(--fg);width:20%}

/* Services */
.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,40px)}
.service{border-top:1px solid var(--line);padding-top:24px;display:grid;gap:14px;align-content:start}
.service p{margin:0;max-width:40ch}
.service ul{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:8px;font-family:var(--sans);font-size:15px;letter-spacing:.02em}
.service li{display:flex;gap:10px}
.service li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);margin-top:.45em;flex:none}
@media (max-width:900px){.services{grid-template-columns:1fr}}

/* Numbers */
.numbers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,32px)}
.num{border-top:1px solid var(--line);padding-top:20px;display:grid;gap:10px;align-content:start}
.num__value{font-family:var(--sans);font-size:clamp(56px,7vw,112px);line-height:.9;font-variant-numeric:tabular-nums;color:var(--accent)}
.num__label{font-family:var(--sans);font-size:15px;letter-spacing:.04em;max-width:22ch}
@media (max-width:900px){.numbers{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Lists (education, timeline) */
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,6fr) minmax(0,3fr);gap:20px;padding-block:22px;border-bottom:1px solid var(--line);align-items:baseline}
.row__k{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.row__v{font-family:var(--sans);font-size:clamp(19px,1.6vw,24px);line-height:1.25}
.row__v small{display:block;font-family:var(--serif);font-size:16px;color:var(--muted);margin-top:6px;line-height:1.45}
.row__x{font-family:var(--sans);font-size:14px;color:var(--muted);text-align:right}
@media (max-width:700px){.row{grid-template-columns:1fr;gap:6px}.row__x{text-align:left}}

/* Closing CTA */
.closing{text-align:left}
.closing .display{max-width:14ch}

/* Footer */
.footer{padding-top:clamp(64px,9vw,120px);padding-bottom:calc(32px + env(safe-area-inset-bottom,0px));font-family:var(--sans)}
.footer__top{display:grid;grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,2fr)) minmax(0,1fr);gap:28px;padding-bottom:56px;border-bottom:1px solid var(--line)}
.footer__brand{max-width:260px;color:var(--accent)}
.footer__brand svg{width:100%;height:auto}
.footer h4{margin:0 0 14px;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:15px}
.footer a{text-decoration:none}
.footer a:hover{text-decoration:underline;text-underline-offset:4px}
.footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;padding-top:24px;font-size:13px;color:var(--muted)}
@media (max-width:900px){.footer__top{grid-template-columns:repeat(2,minmax(0,1fr))}.footer__top > :first-child{grid-column:1 / -1}}

/* Projects index */
.pgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(40px,5vw,72px) clamp(16px,2vw,32px)}
.pgrid .card{width:auto}
.pgrid .card:nth-child(4n+1){grid-column:1 / span 7}
.pgrid .card:nth-child(4n+2){grid-column:9 / span 4;margin-top:clamp(40px,10vw,180px)}
.pgrid .card:nth-child(4n+3){grid-column:2 / span 4}
.pgrid .card:nth-child(4n+4){grid-column:7 / span 6;margin-top:clamp(20px,6vw,100px)}
.pgrid .card:nth-child(4n+1) .ph,.pgrid .card:nth-child(4n+4) .ph{--ar:4/3}
@media (max-width:700px){.pgrid .card{grid-column:1 / -1 !important;margin-top:0 !important}}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filter{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;background:transparent;color:inherit;border:1px solid var(--line);border-radius:999px;padding:10px 16px 8px;cursor:pointer;transition:background-color .3s,color .3s,border-color .3s}
.filter[aria-pressed="true"],.filter:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.card.is-filtered{display:none}

/* Project detail */
.p-hero .ph{--ar:16/8}
@media (max-width:700px){.p-hero .ph{--ar:4/3}}
.facts{display:grid;gap:0;border-top:1px solid var(--line)}
.fact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:12px;padding-block:14px;border-bottom:1px solid var(--line);font-family:var(--sans);font-size:15px}
.fact dt{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.fact dd{margin:0}
.gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
.gallery .ph:nth-child(3n+1){grid-column:1 / -1;--ar:16/9}
.gallery .ph:nth-child(3n+2){grid-column:1 / span 5;--ar:3/4}
.gallery .ph:nth-child(3n+3){grid-column:6 / -1;--ar:4/3;align-self:end}
@media (max-width:700px){.gallery .ph{grid-column:1 / -1 !important}}
.next{display:grid;gap:18px;text-decoration:none;padding-block:clamp(64px,9vw,120px)}
.note{font-family:var(--sans);font-size:13px;letter-spacing:.04em;color:var(--muted);max-width:70ch}

/* Services page */
.svc{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px clamp(16px,2vw,32px);padding-block:clamp(48px,6vw,88px);border-top:1px solid var(--line)}
.svc__head{grid-column:1 / span 5;display:grid;gap:16px;align-content:start}
.svc__body{grid-column:7 / -1;display:grid;gap:28px}
.svc__body h4{margin:0 0 10px;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.svc__body ul{margin:0;padding:0;list-style:none;display:grid;gap:10px;font-family:var(--sans);font-size:17px}
.svc__body li{padding-left:20px;position:relative}
.svc__body li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
@media (max-width:900px){.svc__head,.svc__body{grid-column:1 / -1}}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,32px);counter-reset:s}
.step{border-top:1px solid var(--line);padding-top:20px;display:grid;gap:12px;align-content:start}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.16em;color:var(--accent)}
.step p{margin:0;font-size:17px}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* Profile */
.portrait .ph{--ar:4/5}
.contact-big{font-family:var(--sans);font-size:clamp(28px,4.6vw,72px);line-height:1.05;text-decoration:none;word-break:break-word}
.copy{font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;background:transparent;color:inherit;border:1px solid var(--line);border-radius:999px;padding:10px 14px 8px;cursor:pointer}

/* Custom cursor (desktop, fine pointer) */
.cursor{position:fixed;left:0;top:0;z-index:2147483646;pointer-events:none;opacity:0;transition:opacity .3s}
html.has-cursor .cursor{opacity:1}
html.has-cursor.cursor-out .cursor{opacity:0}
.cursor__ring{position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--fg);display:grid;place-items:center;transition:width .45s var(--ease),height .45s var(--ease),margin .45s var(--ease),background-color .45s,border-color .45s,color .3s;border:1px solid transparent;color:transparent;font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.cursor__ring svg{width:46%;height:auto;opacity:0;transition:opacity .25s}
.cursor[data-state="link"] .cursor__ring{width:44px;height:44px;margin:-22px 0 0 -22px;background:transparent;border-color:var(--fg)}
.cursor[data-state="view"] .cursor__ring{width:96px;height:96px;margin:-48px 0 0 -48px;background:var(--orange);color:var(--cream)}
.cursor[data-state="drag"] .cursor__ring{width:96px;height:96px;margin:-48px 0 0 -48px;background:var(--fg);color:var(--bg)}
.cursor[data-state="fox"] .cursor__ring{width:64px;height:64px;margin:-32px 0 0 -32px;background:var(--cream);color:var(--terra)}
.cursor[data-state="fox"] .cursor__ring svg{opacity:1}
.cursor[data-state="text"] .cursor__ring{width:3px;height:28px;margin:-14px 0 0 -1px;border-radius:2px}
.cursor__txt{position:absolute}
.cursor[data-state="fox"] .cursor__txt{display:none}
html.has-cursor,html.has-cursor a,html.has-cursor button,html.has-cursor [data-cursor]{cursor:none}
html.has-cursor input,html.has-cursor textarea{cursor:text}

/* Page transition */
.pt{position:fixed;inset:0;z-index:2147483640;pointer-events:none;visibility:hidden}
.pt__bg{position:absolute;inset:0;background:var(--cream);transform:translateY(101%)}
.pt__mark{position:absolute;left:50%;top:50%;width:clamp(120px,14vw,190px);transform:translate(-50%,-50%) scale(.9);opacity:0;color:var(--terra)}
.pt__mark svg{width:100%;height:auto;display:block}
.pt__mark .trace{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
/* arriving: cover visible before paint */
html.pt-arrive .pt{visibility:visible}
html.pt-arrive .pt__bg{transform:none}
html.pt-arrive .pt__mark{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* Intro (home, once per session) */
.intro{position:fixed;inset:0;z-index:2147483641;display:grid;place-items:center;background:var(--orange);color:var(--terra)}
.intro__logo{width:min(760px,86vw)}
.intro__logo svg{width:100%;height:auto;display:block;overflow:visible}
.intro__skip{position:absolute;right:var(--gutter);bottom:calc(24px + env(safe-area-inset-bottom,0px));font:600 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;background:none;border:1px solid currentColor;border-radius:999px;color:inherit;padding:10px 14px 8px;cursor:pointer;opacity:.7}
html:not(.show-intro) .intro{display:none}
.intro .trace{fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.intro :is(path,polygon,polyline,rect,circle):not(.trace){fill:currentColor}
.intro #iSubMove{opacity:0}
.intro #iSubMove,.intro #iLockup{transform-box:view-box;transform-origin:0 0}
.intro .eye,.intro .w{transform-box:fill-box;transform-origin:center}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  html.js .lines:not(.is-in) .ln > span,html.js [data-reveal]:not(.is-in){transform:none;opacity:1}
}

/* Landing (home first screen): the uploaded "under construction" intro, kept as-is */
.landing{position:relative;min-height:100svh;display:flex;flex-direction:column;color:var(--terra);overflow:hidden}
.landing__wash{position:absolute;inset:0;background:var(--orange);opacity:0;pointer-events:none}
.landing__stage{position:relative;flex:1;display:grid;place-items:center;padding-block:clamp(24px,8vh,96px) 8px}
.landing__stage svg{width:min(760px,100%);height:auto;display:block;overflow:visible}
.landing .trace{fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.landing #iLogo :is(path,polygon,polyline,rect,circle):not(.trace){fill:currentColor}
.landing #iSubMove{opacity:0}
.landing #iSubMove,.landing #iLockup{transform-box:view-box;transform-origin:0 0}
.landing .eye,.landing .w{transform-box:fill-box;transform-origin:center}
.landing__after{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;padding-block:8px clamp(28px,6vh,56px);text-align:center;color:var(--ink);font-family:var(--sans)}
.landing__services{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;font-weight:400;font-size:clamp(13px,1.6vw,15px);letter-spacing:.22em;text-transform:uppercase}
.landing__services span+span::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--orange);margin-right:28px;vertical-align:middle;transform:translateY(-2px)}
.landing__where{font-weight:300;font-size:15px;letter-spacing:.06em;color:rgba(39,39,39,.62);margin:0}
.landing__cue{margin-top:10px;width:1px;height:48px;background:rgba(39,39,39,.18);position:relative;overflow:hidden;border:0;padding:0;cursor:pointer}
.landing__cue::after{content:"";position:absolute;left:0;top:0;width:1px;height:40%;background:var(--terra);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}100%{transform:translateY(260%)}}
html.intro-lock{overflow:hidden}


/* Cards with several images: soft crossfade slideshow */
.ph--slides > img{position:absolute;inset:0;opacity:0}
.ph--slides > img.is-on{opacity:1}
.card .ph.ph--slides > img{transition:opacity 1.2s ease,transform 1.1s var(--ease)}
.ph__dots{position:absolute;left:14px;bottom:14px;display:flex;gap:6px;z-index:2}
.ph__dots i{width:6px;height:6px;border-radius:50%;background:rgba(248,235,217,.45);transition:background-color .4s}
.ph__dots i.is-on{background:var(--cream)}