/* ==========================================================================
   Celiform: shared styles for every page (round 3)
   Palette "Keep the brand, raise the craft": the logo's forest green and gold on
   warm cream. Type: Cormorant Garamond (brand serif) for headings, Mona Sans for
   everything else. One hierarchy everywhere: title (serif), one plain sentence
   (sans), then the content. Photos in a section share one style and background.
   ========================================================================== */
:root{
  --cream:#F2EDE3;      /* page */
  --paper:#FAF7F0;      /* raised surfaces */
  --sand:#E6DECF;       /* plates behind product */
  --line:#D9D0BE;       /* hairlines */
  --ink:#1B2620;        /* text */
  --ink-2:#4F584F;      /* secondary text, 6:1 on cream */
  --forest:#1E3A27;     /* brand green, from the logo */
  --forest-2:#2B4D35;
  --forest-deep:#12241A;
  --gold:#D2AD45;       /* brand gold, from the logo: on dark only */
  --gold-ink:#7A5C17;   /* gold as text on light, 5:1 on cream */
  --on-forest:#EFE9DB;
  --on-forest-2:#B9BFAE;
  --line-forest:rgba(239,233,219,.16);
  --serif:'Cormorant Garamond','Cormorant',Georgia,serif;
  --sans:'Mona Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --pad:clamp(20px,5vw,72px);
  --max:1320px;
  --r:14px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --nav-h:76px;
  --shadow:0 1px 2px rgba(27,38,32,.05),0 24px 48px -30px rgba(27,38,32,.35);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--cream);-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{font-family:var(--sans);font-size:17px;line-height:1.65;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a,button,summary,label{touch-action:manipulation;-webkit-tap-highlight-color:rgba(30,58,39,.1)}
:focus-visible{outline:2px solid var(--forest);outline-offset:3px;border-radius:4px}
.dark :focus-visible,footer :focus-visible{outline-color:var(--gold)}
::selection{background:var(--gold);color:var(--forest-deep)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-60px;z-index:400;background:var(--forest);color:var(--on-forest);padding:10px 16px;border-radius:999px;transition:top .2s}
.skip:focus{top:12px}

/* ---------- Type: title (serif) -> one sentence (sans) -> content ---------- */
.h1,.h2,.h3{font-family:var(--serif);letter-spacing:-.01em;text-wrap:balance}
.h1{font-size:clamp(40px,4.4vw,66px);font-weight:500;line-height:1.02}
.h2{font-size:clamp(30px,2.9vw,44px);font-weight:500;line-height:1.08}
.h3{font-size:clamp(21px,1.6vw,25px);font-weight:600;line-height:1.15}
.h4{font-size:17px;font-weight:600;line-height:1.35}
.lede{font-size:clamp(18px,1.35vw,20px);line-height:1.6;color:var(--ink-2);max-width:48ch}
.body{color:var(--ink-2);max-width:62ch}
.small{font-size:14.5px;color:var(--ink-2)}
p+p{margin-top:1em}
.dark{background:var(--forest);color:var(--on-forest)}
.dark .lede,.dark .body,.dark .small{color:var(--on-forest-2)}
/* a section's opening: title, then one sentence */
.sec-head{margin-bottom:clamp(40px,4.6vw,64px);max-width:860px}
.sec-head .lede{margin-top:18px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center .lede{margin-left:auto;margin-right:auto}

/* ---------- Layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.section{padding:clamp(88px,10vw,144px) 0}
.section-paper{background:var(--paper)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,104px);align-items:center}
.split.top{align-items:start}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 28px;border-radius:999px;background:var(--forest);color:var(--on-forest);font-size:15.5px;font-weight:550;white-space:nowrap;transition:background .25s,transform .25s var(--ease)}
.btn:hover{background:var(--forest-2)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-gold{background:var(--gold);color:var(--forest-deep)}
.btn-gold:hover{background:#DDBB57}
.btn-line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--cream)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:36px}
.inline-link{border-bottom:1px solid currentColor;padding-bottom:1px}

/* ---------- Navigation ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:200;height:var(--nav-h);transition:background .35s,box-shadow .35s}
.nav .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.solid-nav .nav,.nav.scrolled{background:rgba(242,237,227,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(27,38,32,.08)}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:27px;font-weight:600;letter-spacing:.01em}
.brand img{height:34px;width:auto}
.nav-links{display:flex;align-items:center;gap:clamp(18px,2.2vw,34px);list-style:none}
.nav-links a{font-size:15px;font-weight:500;position:relative;padding:6px 0;color:var(--ink-2);transition:color .2s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]{font-weight:600}
.nav-links a:not(.btn)::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--forest);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.on-dark .nav:not(.scrolled) .nav-links a:not(.btn)::after{background:var(--gold)}
.nav-links a:not(.btn):hover::after,.nav-links a[aria-current="page"]:not(.btn)::after{transform:scaleX(1);transform-origin:left}
.nav-links a.btn{min-height:44px;padding:0 24px;font-size:14.5px;color:var(--on-forest)}
.nav-links a.btn[aria-current="page"]{background:var(--forest-2)}
.menu-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:999px;margin-right:-10px}
.menu-btn span{display:block;width:22px;height:1.5px;background:var(--ink);position:relative;transition:background .2s}
.menu-btn span::before,.menu-btn span::after{content:'';position:absolute;left:0;width:22px;height:1.5px;background:var(--ink);transition:transform .3s var(--ease)}
.menu-btn span::before{top:-7px}.menu-btn span::after{top:7px}
.menu-open .menu-btn span{background:transparent}
.menu-open .menu-btn span::before{transform:translateY(7px) rotate(45deg)}
.menu-open .menu-btn span::after{transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:190;overflow-y:auto;overscroll-behavior:contain;background:var(--cream);padding:calc(var(--nav-h) + 24px) var(--pad) 40px;display:flex;flex-direction:column;justify-content:space-between;gap:32px;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.menu-open .mobile-menu{opacity:1;visibility:visible;transition:opacity .3s}
.mobile-menu ul{list-style:none;display:flex;flex-direction:column}
.mobile-menu li a{display:block;font-family:var(--serif);font-size:clamp(36px,10vw,54px);font-weight:500;line-height:1.25}
.mobile-menu li a[aria-current="page"]{color:var(--forest-2);font-style:italic}
.mobile-menu .menu-foot{font-size:15px;color:var(--ink-2)}
/* on pages whose hero photo is dark, the nav is light until scrolled */
.on-dark .nav:not(.scrolled) .brand,.on-dark .nav:not(.scrolled) .nav-links a:not(.btn){color:var(--on-forest)}
.on-dark .nav:not(.scrolled) .nav-links a.btn{background:var(--gold);color:var(--forest-deep)}
.on-dark .nav:not(.scrolled) .menu-btn span,.on-dark .nav:not(.scrolled) .menu-btn span::before,.on-dark .nav:not(.scrolled) .menu-btn span::after{background:var(--on-forest)}
.on-dark.menu-open .nav .menu-btn span::before,.on-dark.menu-open .nav .menu-btn span::after{background:var(--ink)}
.on-dark.menu-open .nav .brand{color:var(--ink)}
.brand .logo-light{display:none}
.on-dark:not(.menu-open) .nav:not(.scrolled) .brand .logo-light{display:block}
.on-dark:not(.menu-open) .nav:not(.scrolled) .brand .logo-dark{display:none}

/* ---------- Reveal motion (once) ---------- */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal[data-d="1"]{transition-delay:.08s}.js .reveal[data-d="2"]{transition-delay:.16s}.js .reveal[data-d="3"]{transition-delay:.24s}

/* ---------- Photo hero (home, inserts): full-bleed photograph ---------- */
.photo-hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;padding:calc(var(--nav-h) + 48px) 0 clamp(64px,12vh,128px)}
.photo-hero>picture{position:absolute;inset:0;z-index:-2}
.photo-hero picture img{width:100%;height:100%;object-fit:cover}
.photo-hero::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none}
.photo-hero .wrap{width:100%}
.photo-hero .copy{max-width:640px}
.photo-hero .lede{margin-top:24px;max-width:38ch}
/* light photo: dark text, a soft cream wash on the text side */
.photo-hero.light::after{background:linear-gradient(90deg,rgba(242,237,227,.9) 0%,rgba(242,237,227,.6) 36%,rgba(242,237,227,0) 62%)}

.photo-hero.light picture img{object-position:70% 50%}
/* dark photo: light text */
.photo-hero.dim{color:var(--on-forest)}
.photo-hero.dim::after{background:linear-gradient(90deg,rgba(18,26,20,.82) 0%,rgba(18,26,20,.52) 42%,rgba(18,26,20,.08) 75%),linear-gradient(0deg,rgba(18,26,20,.45),rgba(18,26,20,0) 40%)}
.photo-hero.dim .lede{color:#DCD8CB}
.js .photo-hero picture img{animation:settle 2.4s var(--ease) both}
@keyframes settle{from{transform:scale(1.06)}to{transform:none}}

/* ---------- Page header (text only: industries, process, contact) ---------- */
.page-head{padding:calc(var(--nav-h) + clamp(20px,2.4vw,36px)) 0 clamp(40px,5vw,64px)}
.page-head .lede{margin-top:22px}

/* ---------- Photos and plates ---------- */
.photo{position:relative;border-radius:var(--r);overflow:hidden;background:var(--sand)}
.photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.plate{position:relative;display:flex;align-items:center;justify-content:center;border-radius:var(--r);background:radial-gradient(ellipse 70% 62% at 50% 44%,var(--paper),var(--sand) 92%);overflow:hidden}
.plate img{width:76%;height:76%;object-fit:contain;filter:drop-shadow(0 22px 20px rgba(58,48,30,.22)) drop-shadow(0 4px 5px rgba(58,48,30,.16))}
.tag{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:6px 11px;border-radius:999px;background:rgba(250,247,240,.92);color:var(--ink);box-shadow:0 2px 8px rgba(27,38,32,.12)}
.tag.illus::before{content:'';width:6px;height:6px;border-radius:50%;border:1.5px solid var(--gold-ink)}
.corner-tag{position:absolute;left:14px;top:14px;z-index:1}

/* ---------- Home: the problem, the vision ---------- */
.problem{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,104px);align-items:start}
.problem .lede{margin-top:18px}
.problem .copy p{font-size:clamp(18px,1.3vw,20px);line-height:1.7;color:var(--ink-2)}
.problem .copy p:first-child{color:var(--ink)}
.vision{text-align:center}
.vision .statement{font-family:var(--serif);font-size:clamp(30px,3.2vw,46px);line-height:1.25;font-weight:500;max-width:28ch;margin:26px auto 0;color:var(--on-forest);text-wrap:balance}
.vision .lede{margin:26px auto 0;max-width:56ch}

/* ---------- Home: the complete package (three photos) ---------- */
.parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.part .photo{aspect-ratio:4/3.2}
.part .h3{margin-top:24px}
.part p{margin-top:8px;color:var(--ink-2)}

/* ---------- Home: why Celiform ---------- */
.reasons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.6vw,40px);list-style:none;counter-reset:r}
.reasons li{counter-increment:r;padding-top:26px;border-top:1.5px solid var(--forest)}
.reasons li::before{content:counter(r,decimal-leading-zero);display:block;font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--gold-ink);margin-bottom:16px}

.reasons p{margin-top:10px;color:var(--ink-2);font-size:16px}

/* ---------- Catalogue booklet ---------- */
.cat{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(44px,7vw,120px);align-items:center}
.cat-stage{perspective:1600px;justify-self:center}
.cat-book{position:relative;width:clamp(230px,24vw,320px);aspect-ratio:680/961;transform-style:preserve-3d;transform:rotateX(4deg) rotateY(-16deg);transition:transform .2s var(--ease)}
.cat-book .pg{position:absolute;inset:0;border-radius:2px 8px 8px 2px;background:#E9E1D1}
.cat-book .pg1{transform:translate(8px,6px) translateZ(-16px);background:#DCD2BF}
.cat-book .pg2{transform:translate(5px,4px) translateZ(-10px)}
.cat-book .pg3{transform:translate(2px,2px) translateZ(-4px);background:#F1EBDF}
.cat-cover{position:absolute;inset:0;border-radius:2px 9px 9px 2px;overflow:hidden;box-shadow:-2px 0 0 rgba(0,0,0,.14) inset,0 30px 60px -26px rgba(18,36,26,.6),0 12px 24px -16px rgba(18,36,26,.45)}
.cat-cover img{width:100%;height:100%;object-fit:cover}
.cat-cover::before{content:'';position:absolute;inset:0 auto 0 0;width:14px;background:linear-gradient(90deg,rgba(0,0,0,.3),transparent);z-index:2}
.cat-sheen{position:absolute;inset:0;z-index:3;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.2) 45%,rgba(255,255,255,.04) 55%,transparent 70%);opacity:0;transition:opacity .3s;mix-blend-mode:screen}
.cat-stage:hover .cat-sheen{opacity:1}
.cat-meta{margin-top:14px;font-size:13.5px;color:var(--ink-2)}

/* ---------- Closing section (one CTA) ---------- */
.closing{text-align:center}
.closing .h2{margin:0 auto}
.closing .lede{margin:18px auto 0}
.closing .actions{justify-content:center}
.closing .direct{margin-top:28px;font-size:15px;color:var(--on-forest-2)}
.closing .direct a{color:var(--on-forest);border-bottom:1px solid var(--line-forest)}
.closing .direct a:hover{border-color:var(--gold)}

/* Phone reveal: masked, tap to show */
.ph-reveal{display:inline-flex;align-items:center;gap:6px;font:inherit;color:inherit;cursor:pointer}
.ph-shown{display:inline-flex;gap:12px;align-items:center;flex-wrap:wrap}
.ph-shown a{border-bottom:1px solid currentColor;padding-bottom:1px}

/* ---------- Footer ---------- */
footer{background:var(--forest-deep);color:var(--on-forest);padding:clamp(56px,7vw,88px) 0 28px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:40px}
footer .brand img{height:38px}
footer .tagline{margin-top:16px;color:var(--on-forest-2);max-width:32ch;font-size:15px}
footer h2{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
footer ul{list-style:none;display:grid;gap:9px;font-size:15px}
footer ul a,footer ul button{color:var(--on-forest-2);transition:color .2s}
footer ul a:hover,footer ul button:hover{color:var(--on-forest)}
.foot-bottom{margin-top:clamp(48px,6vw,72px);padding-top:22px;border-top:1px solid var(--line-forest);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--on-forest-2)}
.foot-bottom span+span{display:flex;gap:20px}
.foot-bottom a{border-bottom:1px solid var(--line-forest)}

/* ---------- WhatsApp float ---------- */
.wa-float{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:150;width:54px;height:54px;border-radius:50%;background:var(--forest);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px rgba(210,173,69,.4),0 14px 30px -12px rgba(18,36,26,.6);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .35s,transform .35s var(--ease)}
.wa-float.show{opacity:1;transform:none;pointer-events:auto}
.wa-float:hover{background:var(--forest-2)}
.wa-float svg{width:25px;height:25px;fill:var(--on-forest)}

/* ==================== PACKAGING ==================== */
.pack-hero{padding:calc(var(--nav-h) + clamp(40px,6vw,88px)) 0 clamp(72px,8vw,120px)}
.pack-hero .lede{margin-top:22px}
/* The box opens and closes: three photographs of one scene, cross-faded on a loop */
.unbox{position:relative;aspect-ratio:1456/1088;border-radius:var(--r);overflow:hidden;background:var(--sand);box-shadow:var(--shadow)}
.unbox img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.unbox .f2,.unbox .f3{opacity:0}
.unbox.play .f1{animation:f1 9s ease-in-out infinite}
.unbox.play .f2{animation:f2 9s ease-in-out infinite}
.unbox.play .f3{animation:f3 9s ease-in-out infinite}
@keyframes f1{0%,28%{opacity:1}29%,85%{opacity:0}86%,100%{opacity:1}}
@keyframes f2{0%,22%{opacity:0}28%,88%{opacity:1}94%,100%{opacity:0}}
@keyframes f3{0%,38%{opacity:0}44%,76%{opacity:1}82%,100%{opacity:0}}
.spec-list{list-style:none;border-top:1px solid var(--line);margin-top:28px}
.spec-list li{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:18px;padding:14px 0;border-bottom:1px solid var(--line);font-size:16px}
.spec-list li b{font-weight:600}
.spec-list li span{color:var(--ink-2)}
/* Box styles and finishes: a grid of photographs, one caption each */
.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,44px) clamp(16px,2vw,28px)}
.gallery-grid.five{grid-template-columns:repeat(6,minmax(0,1fr))}
.gallery-grid.five>*{grid-column:span 2}
.gallery-grid.five>:nth-child(4){grid-column:2/span 2}
.tile .photo{aspect-ratio:4/3}
.tile .h3{margin-top:18px}
.tile p{margin-top:6px;color:var(--ink-2);font-size:16px}
.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px);list-style:none;counter-reset:s}
.steps3 li{counter-increment:s;padding-top:24px;border-top:1.5px solid var(--forest)}
.steps3 li::before{content:counter(s);display:block;font-family:var(--serif);font-size:40px;line-height:1;color:var(--gold-ink);margin-bottom:12px}
.steps3 p{margin-top:8px;color:var(--ink-2);font-size:16px}

/* ==================== INSERTS ==================== */
/* Real samples: a compact row the visitor moves with the arrows or a swipe */
.carousel{position:relative}
.carousel-track{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(220px,22vw,300px);gap:clamp(14px,1.6vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px max(var(--pad),calc((100vw - var(--max)) / 2 + var(--pad))) 8px;scroll-padding:0 max(var(--pad),calc((100vw - var(--max)) / 2 + var(--pad)));scrollbar-width:none;overscroll-behavior-x:contain;outline-offset:-4px}
.carousel-track::-webkit-scrollbar{display:none}
.slide{scroll-snap-align:start;margin:0}
.slide .plate{aspect-ratio:1/1}
.slide .plate img{width:74%;height:74%}
.slide figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:12px 2px 0;font-size:14.5px}
.slide figcaption b{font-weight:600}
.slide figcaption span{color:var(--ink-2);text-align:right}
.carousel-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:28px}
.carousel-count{font-size:14px;font-weight:600;letter-spacing:.1em;color:var(--ink-2);font-variant-numeric:tabular-nums;min-width:64px}
.carousel-progress{flex:1;height:2px;background:var(--line);position:relative;overflow:hidden;border-radius:2px}
.carousel-progress i{position:absolute;inset:0 auto 0 0;width:var(--p,10%);background:var(--forest);transition:width .4s var(--ease)}
.carousel-btns{display:flex;gap:10px}
.carousel-btns button{width:48px;height:48px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1.5px var(--ink);transition:background .2s,color .2s,opacity .2s}
.carousel-btns button:hover:not(:disabled){background:var(--ink);color:var(--cream)}
.carousel-btns button:disabled{opacity:.3;cursor:default}
.carousel-btns svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Single-side vs double-side smooth: four photos on identical plates */
.smooth{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,4vw,64px)}
.smooth .pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.smooth figure{margin:0}
.smooth .plate{aspect-ratio:1/1}
.smooth .plate img{width:80%;height:80%}
.plate.full img,.smooth .plate.full img{width:100%;height:100%;object-fit:cover;filter:none}
.smooth figcaption{margin-top:10px;font-size:14px;color:var(--ink-2)}
.smooth .h3{margin-top:28px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.smooth p{margin-top:10px;color:var(--ink-2);font-size:16px}
.badge{display:inline-flex;align-items:center;font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:#E3E9DB;color:var(--forest)}
.badge.gold{background:#F1E6C8;color:var(--gold-ink)}
.table-wrap{overflow-x:auto;border-radius:var(--r);background:var(--paper);box-shadow:var(--shadow)}
.compare{width:100%;border-collapse:collapse;min-width:680px;font-size:15.5px}
.compare th,.compare td{padding:18px 22px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.compare thead th{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.compare thead th.us{color:var(--on-forest);background:var(--forest)}
.compare tbody th{font-weight:600}
.compare td{color:var(--ink-2)}
.compare td.us{background:#EDF1E6;font-weight:600;color:var(--forest)}
.compare tr:last-child th,.compare tr:last-child td{border-bottom:0}

.note{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;padding:22px 24px;border-radius:var(--r);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);font-size:15.5px;margin-top:32px}
.note::before{content:'';width:8px;height:8px;margin-top:9px;border-radius:50%;background:var(--gold)}
.note b{color:var(--ink);font-weight:600}

/* ==================== INDUSTRIES ==================== */
.ind-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(32px,3vw,44px) clamp(16px,1.8vw,24px)}
.ind{display:flex;flex-direction:column;scroll-margin-top:calc(var(--nav-h) + 24px)}
.ind .photo{aspect-ratio:4/3}
.ind .h2{font-size:clamp(21px,1.6vw,25px);font-weight:600;line-height:1.15;margin-top:18px}
.ind p{margin-top:8px;color:var(--ink-2);font-size:15.5px}
.ind .suits{margin-top:10px;font-size:14.5px;color:var(--ink-2)}
.ind .suits b{color:var(--ink);font-weight:600}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.jump a{font-size:14px;font-weight:550;padding:8px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);transition:background .2s,color .2s}
.jump a:hover{background:var(--paper);color:var(--ink)}

/* ==================== PROCESS ==================== */
.track{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);counter-reset:s}
.track li{counter-increment:s;display:flex;flex-direction:column;padding:30px 28px 32px;border-radius:var(--r);background:var(--paper);box-shadow:var(--shadow)}
.track li::before{content:counter(s);font-family:var(--serif);font-size:46px;line-height:.9;font-weight:500;color:var(--forest)}
.track li:last-child{background:var(--forest);color:var(--on-forest)}
.track li:last-child::before{color:var(--gold)}
.track li:last-child p{color:var(--on-forest-2)}
.track .when{align-self:flex-start;margin:22px 0 14px;font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:#E3E9DB;color:var(--forest)}
.track li:last-child .when{background:rgba(210,173,69,.18);color:var(--gold)}
.track p{margin-top:10px;color:var(--ink-2);font-size:16px}
.checklist{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.checklist li{padding:24px 26px;border-radius:var(--r);background:rgba(239,233,219,.06);box-shadow:inset 0 0 0 1px var(--line-forest)}
.checklist b{display:block;font-family:var(--serif);font-size:21px;font-weight:600;color:var(--on-forest);margin-bottom:6px}
.checklist span{color:var(--on-forest-2);font-size:16px}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:24px 0;font-family:var(--serif);font-size:clamp(19px,1.5vw,22px);font-weight:600;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';flex:0 0 auto;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line);background:linear-gradient(var(--forest),var(--forest)) center/12px 1.5px no-repeat,linear-gradient(var(--forest),var(--forest)) center/1.5px 12px no-repeat;transition:transform .35s var(--ease),background-color .2s}
.faq details[open] summary::after{transform:rotate(45deg);background-color:#EDF1E6}
.faq .a{padding:0 0 26px;max-width:68ch;color:var(--ink-2)}

/* ==================== CONTACT ==================== */
.founders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,36px)}
.founder{display:flex;flex-direction:column;border-radius:20px;background:var(--paper);box-shadow:var(--shadow);overflow:hidden}
.founder .pic{position:relative;height:clamp(300px,30vw,400px);background:radial-gradient(ellipse 60% 80% at 50% 45%,#F1EBDF,#D9CFBC 95%);display:flex;align-items:flex-end;justify-content:center;padding-top:32px;overflow:hidden}
.founder .pic img{height:100%;width:auto;max-width:none;filter:drop-shadow(0 18px 24px rgba(58,48,30,.18))}
.founder .txt{flex:1;padding:clamp(26px,2.8vw,40px);display:flex;flex-direction:column}
.founder .role{font-size:14.5px;color:var(--gold-ink);font-weight:600;margin-top:6px}
.founder p{color:var(--ink-2);font-size:15.5px;margin-top:14px}
.founder .ways{list-style:none;display:grid;gap:10px;margin-top:auto;padding-top:24px;font-size:15.5px}
.founder .ways li{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.founder .ways .k{flex:0 0 76px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.founder .ways a,.founder .ways button{border-bottom:1px solid var(--line);padding-bottom:1px}
.founder .ways a:hover,.founder .ways button:hover{border-color:var(--forest)}
.also{display:flex;flex-wrap:wrap;gap:12px 36px;margin-top:32px;font-size:15.5px;color:var(--ink-2)}
.also a{color:var(--ink);border-bottom:1px solid var(--line)}
.form-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,6vw,104px);align-items:start}
.form-wrap .intro{position:sticky;top:calc(var(--nav-h) + 32px)}
.next-steps{list-style:none;display:grid;gap:14px;margin-top:32px;counter-reset:n}
.next-steps li{counter-increment:n;display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;font-size:16px;color:var(--ink-2)}
.next-steps li::before{content:counter(n);width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--gold-ink);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:17px;font-weight:600;color:var(--gold-ink)}
.next-steps b{color:var(--ink);font-weight:600}
.form{display:grid;gap:20px;padding:clamp(24px,3vw,44px);border-radius:20px;background:var(--paper);box-shadow:var(--shadow)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field label,.field .legend{font-size:14px;font-weight:600}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:14px 16px;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.field input::placeholder,.field textarea::placeholder{color:#7E8378}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 3px rgba(30,58,39,.14)}
.field 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='%231B2620' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.field textarea{min-height:140px;resize:vertical}
.field input:user-invalid,.field select:user-invalid{border-color:#A8321E}
.choices{display:flex;flex-wrap:wrap;gap:10px}
.choice{position:relative}
.choice input{position:absolute;opacity:0;inset:0;cursor:pointer}
.choice span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-size:14.5px;transition:background-color .2s,border-color .2s,color .2s}
.choice input:checked+span{background:var(--forest);border-color:var(--forest);color:var(--on-forest)}
.choice input:focus-visible+span{outline:2px solid var(--forest);outline-offset:3px}
.form .btn{justify-self:start;margin-top:6px}
.form-note{font-size:14px;color:var(--ink-2)}
.form-note a{border-bottom:1px solid var(--line)}

/* ---------- Simple pages (privacy, thanks, 404) ---------- */
.plain{padding:calc(var(--nav-h) + clamp(24px,3vw,48px)) 0 clamp(80px,10vw,140px)}
.plain .wrap{max-width:860px}
.plain .lede{margin-top:22px}
.prose h2{font-family:var(--serif);font-size:clamp(26px,2.2vw,32px);font-weight:600;margin:48px 0 12px}
.prose p{color:var(--ink-2)}
.prose a{border-bottom:1px solid var(--line)}

/* ---------- Responsive ---------- */
@media (max-width:1120px){
  .nav-links{display:none}
  .menu-btn{display:inline-flex}
  .reasons{grid-template-columns:repeat(2,minmax(0,1fr))}
  .track{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .split,.problem,.cat,.form-wrap,.smooth,.founders{grid-template-columns:minmax(0,1fr)}
  .parts,.steps3{grid-template-columns:minmax(0,1fr)}
  .gallery-grid,.gallery-grid.five{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery-grid.five>*,.gallery-grid.five>:nth-child(4){grid-column:auto}
  .ind-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid>:first-child{grid-column:1/-1}
  .form-wrap .intro{position:static}
  .cat{justify-items:start}
  .cat-stage{justify-self:start}
  .carousel-track{grid-auto-columns:62vw}
  .photo-hero.light::after{background:linear-gradient(0deg,rgba(242,237,227,.95) 0%,rgba(242,237,227,.78) 42%,rgba(242,237,227,0) 72%)}
  .photo-hero.dim::after{background:linear-gradient(0deg,rgba(18,26,20,.88) 0%,rgba(18,26,20,.58) 50%,rgba(18,26,20,.15) 80%)}
}
@media (max-width:640px){
  body{font-size:16px}
  .ind-list,.form .row,.reasons,.track,.checklist,.gallery-grid,.gallery-grid.five{grid-template-columns:minmax(0,1fr)}
  .foot-grid{grid-template-columns:minmax(0,1fr)}
  .spec-list li{grid-template-columns:minmax(0,1fr);gap:4px}
  .carousel-bar{gap:14px}
  .wa-float{width:50px;height:50px}
}

/* ---------- Motion fallbacks ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .reveal{opacity:1;transform:none}
  .js .photo-hero picture img{animation:none}
  .carousel-track{scroll-behavior:auto}
  /* the box is shown open and still */
  .unbox.play .f1,.unbox.play .f2,.unbox.play .f3{animation:none}
  .unbox .f1,.unbox .f2{opacity:0}
  .unbox .f3{opacity:1}
}
@media (hover:hover){
  .photo:hover img{transform:scale(1.03)}
}
.h1+.lede,.h2+.lede{margin-top:18px}
@media (min-width:901px){.pack-hero .split{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}

/* ==================== ROUND 4 ==================== */

/* Home: the problem (text under the heading, then the two inserts side by side) */
.problem-copy{max-width:760px}
.problem-copy .body{margin-top:18px;max-width:none}
.versus{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px);margin-top:clamp(40px,5vw,64px)}
.versus figure{margin:0}
.versus .photo{aspect-ratio:4/3}
.versus figcaption{margin-top:16px}
.versus figcaption b{display:block;font-family:var(--serif);font-size:clamp(21px,1.6vw,25px);font-weight:600;line-height:1.15}
.versus figcaption span{display:block;margin-top:6px;color:var(--ink-2);font-size:16px}

/* Home: vision (heading and text in one colour) with a slowly changing mosaic of categories */
.vision{text-align:left}
.vision-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:center}
.vision .h2,.vision .statement,.vision .vision-text{color:var(--on-forest)}
.vision .statement{margin:20px 0 0;max-width:18ch;font-size:clamp(27px,2.5vw,38px);line-height:1.18}
.vision .vision-text{margin-top:24px;font-size:clamp(17px,1.3vw,19px);line-height:1.7;max-width:46ch}
.mosaic{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mosaic .tile-img{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--forest-2)}
.mosaic .tile-img:first-child{grid-row:span 2;aspect-ratio:auto}
.mosaic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 1.6s ease}
.mosaic img+img{opacity:0}
.mosaic .tile-img.alt img:first-child{opacity:0}
.mosaic .tile-img.alt img+img{opacity:1}

/* Home: why Celiform, the usual way against the Celiform way */
.diff{border-radius:20px;overflow:hidden;box-shadow:var(--shadow);background:var(--paper)}
.diff-row{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr) minmax(0,1.2fr)}
.diff-row>*{padding:20px 26px;border-top:1px solid var(--line);font-size:16px}
.diff-row>:last-child{background:var(--forest);color:var(--on-forest);border-top-color:var(--line-forest);padding-left:56px;position:relative}
.diff-row:not(.diff-head)>:last-child::before{content:'';position:absolute;left:26px;top:24px;width:16px;height:9px;border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
.diff-row>:nth-child(2){color:var(--ink-2)}
.diff-row b{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.25}
.diff-head>*{border-top:0;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding-top:22px;padding-bottom:18px}
.diff-head>:nth-child(2){color:var(--ink-2)}
.diff-head>:last-child{color:var(--gold);padding-left:26px}

@media (max-width:900px){
  .vision-grid{grid-template-columns:minmax(0,1fr)}
  .diff-row{grid-template-columns:1fr 1fr}
  .diff-row>b{grid-column:1/-1;padding-bottom:4px;border-top:1px solid var(--line)}
  .diff-row>b+span{border-top:0}
  .diff-row>:last-child{border-top:0}
  .diff-head>:first-child{display:none}
}
@media (max-width:640px){
  .versus{grid-template-columns:minmax(0,1fr)}
  .diff-row>*{padding:14px 16px;font-size:15px}
  .diff-row>:last-child{padding-left:40px}
  .diff-row:not(.diff-head)>:last-child::before{left:14px;top:18px}
}
@media (prefers-reduced-motion:reduce){ .mosaic img{transition:none} }
.issues{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(40px,5vw,64px)}
.issues li{padding:30px 28px 32px;border-radius:var(--r);background:var(--paper);box-shadow:var(--shadow)}
.issues svg{width:44px;height:44px;fill:none;stroke:var(--gold-ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.issues .h3{margin-top:18px}
.issues p{margin-top:8px;color:var(--ink-2);font-size:16px}
.problem .answer,.answer{margin-top:clamp(32px,4vw,48px);max-width:760px;font-family:var(--serif);font-size:clamp(21px,1.8vw,27px);line-height:1.32;color:var(--ink)}
@media (max-width:900px){.issues{grid-template-columns:minmax(0,1fr)}}
/* split heroes (home, packaging, inserts): text left, photo right */
.split-hero{padding:calc(var(--nav-h) + clamp(16px,2vw,28px)) 0 clamp(56px,7vw,96px)}
.split-hero .lede{margin-top:22px}
.hero-photo{aspect-ratio:4/3;box-shadow:var(--shadow)}
@media (min-width:901px){.split-hero .split{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.gallery-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.tag.real::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--forest-2)}
@media (max-width:900px){.gallery-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.gallery-grid.four{grid-template-columns:minmax(0,1fr)}}
.nb{white-space:nowrap}

/* Moderate photo sizes (owner, 2026-09-28): no photo dominates a section */
.split>.photo,.split>.plate,.split>.photo.reveal,.split>.plate.reveal{width:100%;max-width:500px;justify-self:center}
.split-hero .hero-photo{max-width:560px;width:100%;justify-self:end}
.mosaic{max-width:520px;justify-self:end;width:100%}
.part .photo{aspect-ratio:4/3}
.gallery-grid{max-width:1080px;margin-left:auto;margin-right:auto}
.gallery-grid.four{max-width:none}
/* Home hero (round 7): a 4:3 photo on the right 64% of the hero, shown at or below its own resolution so it stays sharp.
   Its left and top edges fade into the cream page, so there is no edge and no bar under the nav.
   On tablets and phones it sits above the text instead. */
.photo-hero.light{min-height:min(100svh,48vw);background:var(--cream)}
.photo-hero.light>picture{inset:0 0 0 auto;width:64%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%),linear-gradient(180deg,transparent 0,#000 16%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 30%),linear-gradient(180deg,transparent 0,#000 16%);mask-composite:intersect}
.photo-hero.light picture img{object-position:50% 50%}
.photo-hero.light::after{display:none}
.photo-hero .copy{max-width:min(560px,40vw)}
@media (max-width:1100px){
  .photo-hero.light>picture{width:auto;-webkit-mask-image:none;mask-image:none}
  .photo-hero{display:block;min-height:0;padding:calc(var(--nav-h) + 12px) 0 clamp(56px,8vw,88px)}
  .photo-hero>picture{position:relative;inset:auto;display:block;margin:0 var(--pad) 32px;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;max-height:58vh}
  .photo-hero.light picture img{object-position:50% 50%}
  .photo-hero::after{display:none}
  .photo-hero .copy{max-width:640px}
  .js .photo-hero picture img{animation:none}
}

/* ==================== CONTACT: founder cards (round 5) ====================
   Dark forest glass with a gold hairline edge, the portrait in an arch, contact chips.
   Hover (fine pointers only): the card lifts and a soft light sweeps across.
   Reduced motion: no lift, no sweep. Touch: static. */
.page-head.tight{padding:calc(var(--nav-h) + clamp(16px,2vw,28px)) 0 clamp(24px,3vw,36px)}
.founders-sec{padding:0 0 clamp(64px,8vw,104px)}
.fcs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.fc{position:relative;display:grid;grid-template-columns:clamp(120px,11vw,150px) minmax(0,1fr);gap:clamp(20px,2.2vw,32px);align-items:center;padding:clamp(22px,2.4vw,32px);border-radius:24px;color:var(--on-forest);isolation:isolate;overflow:hidden;
  background:linear-gradient(150deg,#244631 0%,#1A3423 55%,#12241A 100%) padding-box,linear-gradient(135deg,rgba(210,173,69,.75),rgba(210,173,69,.08) 38%,rgba(239,233,219,.12) 64%,rgba(210,173,69,.55)) border-box;
  border:1px solid transparent;box-shadow:0 30px 60px -34px rgba(18,36,26,.75);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.fc::before{content:'';position:absolute;inset:-40% auto auto -30%;width:80%;height:120%;z-index:-1;background:radial-gradient(closest-side,rgba(210,173,69,.16),transparent);pointer-events:none}
.fc::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(239,233,219,.07) 50%,transparent 65%);transform:translateX(-100%);pointer-events:none}
.fc-portrait{position:relative;aspect-ratio:5/6;border-radius:999px 999px 18px 18px;background:radial-gradient(ellipse 70% 60% at 50% 40%,#F4EEE3,#D6CBB6 95%);display:flex;align-items:flex-end;justify-content:center;overflow:hidden;box-shadow:0 0 0 1px rgba(210,173,69,.55),0 0 0 6px rgba(210,173,69,.08)}
.fc-portrait img{height:92%;width:auto;max-width:none}
.fc-name{font-family:var(--serif);font-size:clamp(23px,1.9vw,28px);font-weight:600;line-height:1.1;letter-spacing:-.005em}
.fc-role{margin-top:6px;font-size:14px;font-weight:600;color:var(--gold)}
.fc-bio{margin-top:12px;font-size:15px;line-height:1.6;color:var(--on-forest-2)}
.fc-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;border-radius:999px;font-size:14px;color:var(--on-forest);background:rgba(239,233,219,.06);box-shadow:inset 0 0 0 1px rgba(239,233,219,.16);transition:background .25s,box-shadow .25s}
.chip:hover,.chip:focus-within{background:rgba(239,233,219,.1);box-shadow:inset 0 0 0 1px rgba(210,173,69,.6)}
.chip svg{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.chip a,.chip button{color:inherit;font:inherit}
.chip .ph-shown{gap:10px}
.chip .ph-shown a{border-bottom:1px solid rgba(239,233,219,.3)}
.founders-sec .also{margin-top:22px}
@media (hover:hover) and (pointer:fine){
  .fc:hover{transform:translateY(-4px);box-shadow:0 40px 70px -34px rgba(18,36,26,.85)}
  .fc:hover::after{transform:translateX(100%);transition:transform 1.2s var(--ease)}
}
@media (max-width:1100px){.fcs{grid-template-columns:minmax(0,1fr)}.fc{max-width:680px}}
@media (max-width:560px){.fc{grid-template-columns:92px minmax(0,1fr);align-items:start}.fc-bio{font-size:14.5px}}
@media (prefers-reduced-motion:reduce){.fc,.fc::after{transition:none!important}.fc:hover{transform:none}.fc:hover::after{transform:translateX(-100%)}}
.versus{max-width:920px}