/* ============ SMART RESTOCK : bespoke clay.com/functions layout, Oyster warm palette ============ */
:root{--paper-2:#FBF6EC;--cream-bg:#F4ECDE;}
body{background:var(--cream-bg)}
.fnwrap{max-width:1160px;margin:0 auto;padding:0 28px}

/* shared browser frame (reused pattern) */
.shot{background:var(--paper-2);border:1px solid var(--line-soft);border-radius:16px;overflow:hidden}
.shot .sbar{display:flex;align-items:center;gap:7px;padding:12px 15px;border-bottom:1px solid var(--line-soft);background:var(--wash)}
.shot .sbar i{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.shot .sbar i:nth-child(1){background:#E39B84}.shot .sbar i:nth-child(2){background:#E8C583}.shot .sbar i:nth-child(3){background:#A9C199}
.shot .sbar span{margin-left:8px;font-family:var(--disp);font-size:12px;color:var(--muted);font-weight:600}
.shot>img{display:block;width:100%}

/* dark button */
.fnbtn{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:600;font-size:15px;background:var(--espresso);color:var(--on);padding:14px 24px;border-radius:12px;text-decoration:none;transition:transform .3s var(--e-out),box-shadow .3s;border:0;cursor:pointer}
.fnbtn .ar{color:var(--mustard)}
.fnbtn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(40,20,8,.22)}
.fnbtn.ghost{background:transparent;color:var(--espresso);border:1px solid var(--line-soft)}
.fnbtn.ghost .ar{color:var(--orange)}

/* 1 · MUSTARD HERO PANEL (contained, rounded, coloured) */
.fnhero{max-width:1240px;margin:24px auto 0;padding:118px 24px;border-radius:34px;text-align:center;overflow:hidden;position:relative;
  background:linear-gradient(160deg,#F4CF7A,#EEBE55);color:var(--espresso)}
.fnhero::before{content:"";position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:radial-gradient(rgba(120,80,25,.14) 1px,transparent 1px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(75% 70% at 50% 30%,#000,transparent 80%);mask-image:radial-gradient(75% 70% at 50% 30%,#000,transparent 80%)}
.fnhero>*{position:relative;z-index:1}
.fnhero .eyebrow{color:var(--espresso);margin-bottom:20px}
.fnhero h1{font-family:var(--disp);font-size:clamp(38px,5.6vw,64px);line-height:1.04;letter-spacing:-.032em;font-weight:600;max-width:16ch;margin:0 auto;color:var(--espresso);text-wrap:balance}
.fnhero .sub{max-width:54ch;margin:24px auto 0;color:#5A3A16;font-size:clamp(16px,1.4vw,19px);line-height:1.56}
.fnhero .cta{margin-top:32px;display:flex;justify-content:center}

/* 2 · LOGO STRIP */
.fnlogos{background:var(--cream-bg);padding:56px 0 44px;text-align:center}
.fnlogos .lab{font-family:var(--disp);text-transform:uppercase;letter-spacing:.12em;font-size:11.5px;font-weight:700;color:var(--faint);margin:0 0 30px}
.fnloggrid{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px 44px;max-width:960px;margin:0 auto;padding:0 24px}
.fnloggrid img{height:26px;width:auto;max-width:130px;object-fit:contain;opacity:.72;filter:saturate(.2) contrast(1.02);transition:opacity .3s}
.fnloggrid img:hover{opacity:1;filter:none}

/* 3 · BIG TESTIMONIAL CARD */
.fntesti{background:var(--cream-bg);padding:40px 0}
.fntcard{max-width:1160px;margin:0 auto;background:var(--paper-2);border:1px solid var(--line-soft);border-radius:30px;box-shadow:0 16px 44px rgba(50,25,10,.06);
  display:grid;grid-template-columns:1.1fr .9fr;align-items:stretch;overflow:hidden}
.fntq{padding:56px 52px;display:flex;flex-direction:column;justify-content:center}
.fntq blockquote{font-family:var(--disp);font-size:clamp(20px,2vw,26px);line-height:1.4;letter-spacing:-.014em;font-weight:500;color:var(--espresso);margin:0}
.fntq .nm{font-family:var(--disp);font-weight:700;font-size:16px;color:var(--espresso);margin:26px 0 4px}
.fntq .rl{font-family:var(--disp);text-transform:uppercase;letter-spacing:.13em;font-size:11px;font-weight:700;color:var(--faint)}
.fntq .fnbtn{margin-top:26px;align-self:flex-start}
.fntpic{position:relative;min-height:380px;padding:26px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#EDC7B4,#EEBE55)}
.fntpic::before{content:"";position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:radial-gradient(rgba(120,70,40,.16) 1.3px,transparent 1.3px);background-size:20px 20px}
.fntpic img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;border-radius:20px;box-shadow:0 22px 50px rgba(50,25,10,.24)}

/* 4 · BIG CENTERED STATEMENT + wide shot */
.fnbig{background:var(--cream-bg);text-align:center;padding:96px 24px 48px}
.fnbig h2{font-family:var(--disp);font-size:clamp(32px,5vw,60px);line-height:1.04;letter-spacing:-.032em;font-weight:600;color:var(--espresso);max-width:17ch;margin:0 auto}
.fnbig p{max-width:52ch;margin:22px auto 0;color:var(--ink-soft);font-size:17px;line-height:1.56}
.fnwideshot{max-width:1040px;margin:52px auto 0;padding:0 24px}
.fnwideshot .shot{box-shadow:0 26px 60px rgba(50,25,10,.16)}

/* 5-7 · CAPABILITY PANELS (alternating) */
.fnfeat{background:var(--cream-bg);padding:30px 0}
.fnpanel{max-width:1160px;margin:22px auto;background:var(--paper-2);border:1px solid var(--line-soft);border-radius:30px;box-shadow:0 16px 44px rgba(50,25,10,.06);display:grid;grid-template-columns:0.92fr 1.08fr;align-items:center;gap:44px;padding:30px 64px 30px 30px;overflow:hidden}
.fnpanel.flip{grid-template-columns:1.08fr 0.92fr;padding:30px 30px 30px 64px}
.fnpanel.flip .fntext{order:2}
.fntext{max-width:420px}
.fnpanel.flip .fntext{margin-left:auto}
.fntext .eyebrow{display:inline-block;margin-bottom:18px;font-size:12px;letter-spacing:.15em}
.fntext h2{font-family:var(--disp);font-size:clamp(30px,3.4vw,44px);line-height:1.07;letter-spacing:-.026em;font-weight:500;color:var(--espresso);margin:0}
.fntext p{color:var(--ink-soft);font-size:16.5px;line-height:1.62;margin:20px 0 0}
.fnvis{position:relative;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:380px;border-radius:24px;padding:34px;overflow:hidden;
  background:linear-gradient(160deg,#EFE3D0,#E4D4BC)}
.fnvis::before{content:"";position:absolute;inset:0;z-index:0;opacity:.6;
  background-image:radial-gradient(rgba(90,58,34,.16) 1.3px,transparent 1.3px);background-size:20px 20px}
.fnvis .shot{position:relative;z-index:1;width:100%;box-shadow:0 26px 56px rgba(50,25,10,.22)}

/* 8 · WHAT IT WATCHES LIBRARY */
.fnlib{background:var(--cream-bg);padding:88px 0 64px}
.fnlib .lhd{max-width:1160px;margin:0 auto;padding:0 28px}
.fnlib h2{font-family:var(--disp);font-size:clamp(30px,3.6vw,44px);line-height:1.05;letter-spacing:-.028em;font-weight:500;color:var(--espresso);margin:0;max-width:20ch}
.fnlib .eyebrow{display:inline-block;margin:44px 0 20px}
.fngrid{max-width:1160px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fncard{background:var(--paper-2);border:1px solid var(--line-soft);border-radius:18px;padding:26px 24px;transition:transform .3s var(--e-out),box-shadow .3s}
.fncard:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(50,25,10,.10)}
.fncard .ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,#F4CF7A,#EEBE55);margin-bottom:16px;font-size:20px}
.fncard h3{font-family:var(--disp);font-size:20px;font-weight:600;letter-spacing:-.014em;color:var(--espresso);margin:0 0 7px}
.fncard p{color:var(--ink-soft);font-size:14.5px;line-height:1.5;margin:0}

/* 9 · CLOSING CTA */
.fnclose{text-align:center;padding:112px 24px;background:radial-gradient(120% 120% at 50% 0%,#E7D3BC,var(--cream-bg))}
.fnclose .eyebrow{margin-bottom:18px}
.fnclose h2{font-family:var(--disp);font-size:clamp(34px,5vw,60px);font-weight:600;letter-spacing:-.036em;line-height:1.04;max-width:16ch;margin:0 auto;color:var(--espresso)}
.fnclose .esub{color:var(--muted);margin:22px auto 0;max-width:50ch;font-size:17px;line-height:1.55}
.fnclose .cta{display:flex;gap:12px;justify-content:center;margin-top:32px;flex-wrap:wrap}

/* MOTION (reused) */
.rvz{opacity:0;transform:translateY(28px) scale(.97);transition:opacity 1s var(--e-out),transform 1.1s var(--e-out)}
.rvz.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rvz{opacity:1;transform:none}}
.lift{opacity:calc(.34 + .66*var(--lit,0))}
@media(prefers-reduced-motion:reduce){.lift{opacity:1}}
.btn{transition:transform .25s var(--e-out)}.btn:hover{transform:translateY(-2px)}

@media(max-width:900px){
  .fnhero{margin-top:14px;padding:88px 22px;border-radius:26px}
  .fntcard{grid-template-columns:1fr}
  .fntq{padding:38px 28px 30px}
  .fntpic{min-height:300px;order:-1}
  .fnpanel,.fnpanel.flip{grid-template-columns:1fr;padding:22px;gap:12px}
  .fnpanel.flip .fntext{order:0}
  .fntext{max-width:none;margin:0!important;padding:22px 18px 6px}
  .fnvis{min-height:300px;padding:26px}
  .fngrid{grid-template-columns:1fr}
}