/* ========================================================================== gdj. — shared stylesheet for service pages Tokens lifted verbatim from index.html so nothing drifts. ========================================================================== */ :root{ --cream:#FBF6EC; --oat:#ECE3D4; --ivory:#F8F2E7; --ink:#2C231D; --charcoal:#221B16; --espresso:#2A211B; --brown:#54463B; --mut:#6B5C49; --line:#E4DAC9; --honey:#E0A34E; --clay:#BC5F3B; --sage:#7E9673; --maxw:1180px; --ease:cubic-bezier(.19,1,.22,1); --ease2:cubic-bezier(.22,.61,.36,1); /* per-page accent — overridden on */ --a:#BC5F3B; --a-ink:#AE522C; --a-soft:rgba(188,95,59,.10); } body[data-accent="honey"]{--a:#E0A34E;--a-ink:#8F5E1C;--a-soft:rgba(224,163,78,.14)} body[data-accent="sage"] {--a:#7E9673;--a-ink:#566E4C;--a-soft:rgba(126,150,115,.13)} body[data-accent="clay"] {--a:#BC5F3B;--a-ink:#AE522C;--a-soft:rgba(188,95,59,.10)} *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--cream);color:var(--ink);font-family:'Jost',sans-serif;font-size:16.5px;line-height:1.68; -webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} ::selection{background:var(--honey);color:var(--ink)} :focus-visible{outline:2.5px solid var(--clay);outline-offset:3px;border-radius:4px} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px} .serif{font-family:'Cormorant',serif} .dot{color:var(--honey)} .eyebrow{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--mut);font-weight:500} .skip{position:absolute;left:-9999px} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .skip:focus{left:16px;top:16px;z-index:200;background:var(--ink);color:var(--cream);padding:12px 18px;border-radius:8px} /* ===== buttons ===== */ .btn{position:relative;display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px; padding:16px 30px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;will-change:transform; transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,color .3s} .btn svg{transition:transform .3s var(--ease)}.btn:hover svg{transform:translateX(5px)} .btn-primary{background:#AE522C;color:#fff} .btn-primary:hover{box-shadow:0 18px 40px -16px rgba(188,95,59,.7)} .btn-ghost{border-color:currentColor} .btn-ghost:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)} .btn-honey{background:var(--honey);color:var(--ink)} .btn-honey:hover{box-shadow:0 18px 40px -16px rgba(224,163,78,.75)} .btn-cream-ghost{border-color:rgba(251,246,236,.5);color:var(--cream)} .btn-cream-ghost:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)} /* ===== cursor ===== */ .cursor{position:fixed;top:0;left:0;width:36px;height:36px;border:1.5px solid var(--clay);border-radius:50%; transform:translate(-50%,-50%);pointer-events:none;z-index:120;opacity:0; transition:width .3s var(--ease),height .3s var(--ease),background .3s,opacity .3s,border-color .3s} .cursor.on{opacity:.85} .cursor.grow{width:70px;height:70px;background:rgba(224,163,78,.14);border-color:transparent} @media (hover:none){.cursor{display:none}} /* ===== header ===== */ header{position:fixed;top:0;left:0;right:0;z-index:60;transition:padding .4s var(--ease)} header .bar{display:flex;align-items:center;justify-content:space-between;height:74px;padding:0 28px; max-width:var(--maxw);margin:0 auto;transition:height .4s var(--ease)} header .glass{position:absolute;inset:0;background:rgba(251,246,236,0);backdrop-filter:blur(0px); border-bottom:1px solid transparent;transition:background .4s,backdrop-filter .4s,border-color .4s} header.scrolled .glass{background:rgba(251,246,236,.82);backdrop-filter:blur(14px);border-color:var(--line)} header.scrolled .bar{height:62px} .brand{position:relative;font-family:'Fraunces',serif;font-variation-settings:"opsz" 144;font-weight:600; font-size:30px;letter-spacing:-.02em;z-index:2;transition:color .4s} .nav-links{display:flex;align-items:center;gap:36px;z-index:2} .nav-links a.link{font-size:15px;position:relative;padding:4px 0;transition:color .4s} .nav-links a.link::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--clay);transition:width .3s var(--ease)} .nav-links a.link:hover::after,.nav-links a.link[aria-current="page"]::after{width:100%} .nav-cta{font-size:14px;padding:11px 22px} /* ===== nav dropdown ===== */ .nav-dd{position:relative} .nav-dd .dd-trigger{font-family:inherit;font-size:15px;color:inherit;background:none;border:none;cursor:pointer; display:inline-flex;align-items:center;gap:7px;padding:4px 0;position:relative;line-height:inherit} .nav-dd .dd-trigger::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--clay);transition:width .3s var(--ease)} .nav-dd:hover .dd-trigger::after,.nav-dd.open .dd-trigger::after,.nav-dd .dd-trigger[aria-current="true"]::after{width:100%} .nav-dd .chev{transition:transform .35s var(--ease)} .nav-dd.open .chev{transform:rotate(180deg)} .dd-panel{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(-8px); min-width:262px;background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:9px; box-shadow:0 28px 60px -34px rgba(84,70,59,.55);opacity:0;visibility:hidden;pointer-events:none; transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s} .nav-dd:hover .dd-panel,.nav-dd.open .dd-panel,.dd-panel:focus-within{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)} .dd-panel::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px} .dd-panel a{display:flex;align-items:baseline;gap:11px;padding:11px 13px;border-radius:10px;font-size:15px; transition:background .22s,padding .22s} .dd-panel a:hover{background:var(--ivory);padding-left:17px} .dd-panel a[aria-current="page"]{background:var(--ivory)} .dd-panel a i{font-style:normal;font-family:'Cormorant',serif;font-size:14px;color:var(--mut);min-width:17px} .dd-panel a:hover i{color:var(--a-ink)} /* ===== mobile menu ===== */ .burger{display:none;position:relative;z-index:70;background:none;border:none;cursor:pointer;padding:8px} .burger span{display:block;width:26px;height:2px;background:var(--ink);margin:6px 0;border-radius:2px;transition:.4s var(--ease)} body.menu-open .burger span{background:var(--cream)} body.menu-open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)} body.menu-open .burger span:nth-child(2){opacity:0} body.menu-open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)} .fsmenu{position:fixed;inset:0;z-index:65;background:var(--charcoal);color:var(--cream); visibility:hidden; display:flex;flex-direction:column;justify-content:center;padding:104px 32px 108px; clip-path:circle(0% at calc(100% - 48px) 48px);transition:clip-path .7s var(--ease);pointer-events:none; overflow-y:auto;-webkit-overflow-scrolling:touch} body.menu-open .fsmenu{clip-path:circle(140% at calc(100% - 48px) 48px);pointer-events:auto;visibility:visible} .fsmenu a{font-family:'Cormorant',serif;font-weight:600; font-size:clamp(32px,7.6vw,64px);line-height:1.08;letter-spacing:-.02em;padding:5px 0;opacity:0;transform:translateY(20px); transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s} .fsmenu a:hover{color:var(--honey)} /* the five services stack, one per line */ .fsmenu .sub{display:flex;flex-direction:column;gap:2px;padding-left:16px; border-left:1px solid rgba(251,246,236,.22);margin:10px 0 22px 2px} .fsmenu .sub a{display:block;font-weight:500;font-size:clamp(19px,4.6vw,26px); line-height:1.35;padding:5px 0;color:#d8c9b4} .fsmenu .sub a:hover{color:var(--honey)} body.menu-open .fsmenu a{opacity:1;transform:none} body.menu-open .fsmenu > a:nth-of-type(1){transition-delay:.24s} body.menu-open .fsmenu .sub a:nth-child(1){transition-delay:.29s} body.menu-open .fsmenu .sub a:nth-child(2){transition-delay:.33s} body.menu-open .fsmenu .sub a:nth-child(3){transition-delay:.37s} body.menu-open .fsmenu .sub a:nth-child(4){transition-delay:.41s} body.menu-open .fsmenu > a:nth-of-type(2){transition-delay:.46s} body.menu-open .fsmenu > a:nth-of-type(3){transition-delay:.51s} body.menu-open .fsmenu > a:nth-of-type(4){transition-delay:.56s} .fsmenu .foot{position:absolute;bottom:32px;left:32px;right:32px;display:flex;justify-content:space-between; color:#b7a48c;font-size:14px;font-family:'Jost'} /* ========================================================================== SERVICE PAGE ========================================================================== */ section{padding:110px 0} /* --- hero --- */ .sv-hero{position:relative;padding:150px 0 96px;overflow:hidden} .sv-hero .wrap{position:relative;z-index:1} .sv-grid{display:grid;grid-template-columns:1.14fr .86fr;gap:64px;align-items:center} .sv-grid.solo{grid-template-columns:1fr} .sv-kicker{display:flex;align-items:center;gap:14px;color:var(--mut);font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:500} .sv-kicker .rule{height:1px;width:44px;background:var(--a)} .sv-hero h1{font-family:'Cormorant',serif;font-weight:600;font-size:clamp(40px,4.7vw,62px); line-height:1.06;letter-spacing:-.018em;margin-top:20px;text-wrap:balance} .sv-hero h1 em{font-style:italic;color:var(--a-ink)} .sv-hero .lede{color:var(--brown);font-size:clamp(16.5px,1.55vw,19.5px);line-height:1.62;max-width:46ch;margin-top:26px} .sv-hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px} .sv-hero .meta{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px;padding-top:24px;border-top:1px solid var(--line)} .sv-hero .meta div{min-width:0} .sv-hero .meta dt{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)} .sv-hero .meta dd{font-family:'Cormorant',serif;font-weight:600;font-size:23px;color:var(--ink);margin-top:5px;line-height:1.2} /* page-load choreography */ .lines{display:block;overflow:hidden;padding-bottom:.14em} .lines > span{display:block;transform:translateY(115%);transition:transform 1s var(--ease)} body.loaded .lines > span{transform:none} body.loaded .sv-hero h1 .lines:nth-child(2) > span{transition-delay:.1s} body.loaded .sv-hero h1 .lines:nth-child(3) > span{transition-delay:.2s} .fade{opacity:0;transform:translateY(16px);transition:.9s var(--ease)} body.loaded .fade{opacity:1;transform:none} body.loaded .fade.d1{transition-delay:.42s} body.loaded .fade.d2{transition-delay:.54s} body.loaded .fade.d3{transition-delay:.66s} /* --- image frames --- */ .frame{position:relative;border-radius:20px;overflow:hidden;background:var(--ivory);border:1px solid var(--line)} .frame img{width:100%;height:100%;object-fit:cover} .frame.p45{aspect-ratio:4/5} .frame.sq{aspect-ratio:1/1} .slot{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:9px;text-align:center;padding:24px;background: repeating-linear-gradient(135deg,transparent 0 13px,rgba(84,70,59,.045) 13px 26px),var(--ivory)} .slot .tag{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)} .slot .nm{font-family:'Cormorant',serif;font-weight:600;font-size:20px;color:var(--brown)} .slot .dim{font-size:12.5px;color:var(--mut)} /* --- statement --- */ .sv-statement{padding:118px 0;text-align:center} .sv-statement p{font-family:'Cormorant',serif;font-weight:600; font-size:clamp(30px,4.7vw,58px);line-height:1.16;letter-spacing:-.02em;max-width:19ch;margin:0 auto} .sv-statement em{font-style:italic;color:var(--a-ink)} /* --- section heads --- */ .sec-head{max-width:640px;margin:0 auto 60px;text-align:center} .sec-head h2{font-family:'Cormorant',serif;font-weight:600; font-size:clamp(33px,4.9vw,58px);line-height:1.06;letter-spacing:-.02em;margin-top:16px} .sec-head h2 em{font-style:italic;color:var(--a-ink)} .sec-head p{color:var(--brown);font-size:17px;margin-top:16px;max-width:52ch;margin-left:auto;margin-right:auto} .sec-head.left{margin-left:0;text-align:left} .sec-head.left p{margin-left:0} /* --- included: hairline rows --- */ .spec{border-top:1px solid var(--line);margin-top:4px} .spec-row{display:grid;grid-template-columns:46px minmax(0,.82fr) 1.18fr;gap:26px;align-items:baseline; padding:28px 6px;border-bottom:1px solid var(--line);transition:background .35s var(--ease),padding .35s var(--ease)} .spec-row:hover{background:var(--a-soft);padding-left:18px;padding-right:18px} .spec-row .ix{font-family:'Cormorant',serif;font-weight:600;font-size:15px;color:var(--a-ink);letter-spacing:.04em} .spec-row h3{font-family:'Cormorant',serif;font-weight:600;font-size:26px;letter-spacing:-.01em;line-height:1.2} .spec-row p{color:var(--brown);font-size:15.5px;line-height:1.6} /* --- process (oat) --- */ .sv-process{background:var(--oat)} .sv-process .inner{display:grid;grid-template-columns:.92fr 1.08fr;gap:72px;align-items:start} .sv-process .sticky{position:sticky;top:118px} .steps{counter-reset:s} .step{display:grid;grid-template-columns:auto 1fr;gap:24px;padding:26px 0;border-bottom:1px solid rgba(84,70,59,.14)} .step:first-child{padding-top:0} .step:last-child{border-bottom:none;padding-bottom:0} .step .n{width:38px;height:38px;border-radius:50%;border:1px solid var(--a-ink);color:var(--a-ink); display:flex;align-items:center;justify-content:center;font-family:'Cormorant',serif;font-weight:700;font-size:17px;font-variant-numeric:lining-nums; flex:none;transition:background .4s var(--ease),color .4s var(--ease)} .step:hover .n{background:var(--a-ink);color:var(--cream)} .step h3{font-family:'Cormorant',serif;font-weight:600;font-size:25px;letter-spacing:-.01em;line-height:1.25} .step p{color:var(--brown);font-size:15.5px;margin-top:7px;line-height:1.6} .step .when{display:inline-block;margin-top:11px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)} /* --- questions --- */ .qa{max-width:820px;margin:0 auto;border-top:1px solid var(--line)} .qa details{border-bottom:1px solid var(--line)} .qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:24px; padding:26px 6px;font-family:'Cormorant',serif;font-weight:600;font-size:24px;letter-spacing:-.01em;line-height:1.3; transition:color .3s} .qa summary::-webkit-details-marker{display:none} .qa summary:hover{color:var(--a-ink)} .qa .pm{position:relative;width:15px;height:15px;flex:none;align-self:center} .qa .pm::before,.qa .pm::after{content:"";position:absolute;background:var(--a-ink);border-radius:2px;transition:transform .35s var(--ease),opacity .35s} .qa .pm::before{left:0;top:6.5px;width:15px;height:2px} .qa .pm::after{left:6.5px;top:0;width:2px;height:15px} .qa details[open] .pm::after{transform:rotate(90deg);opacity:0} .qa details p{color:var(--brown);font-size:16px;line-height:1.68;padding:0 60px 28px 6px;max-width:68ch;margin-top:-6px} /* --- CTA — a pinned note, asymmetric, on the page's own cream --- */ .cta{background:var(--cream);padding:clamp(60px,7vw,96px) 0 clamp(70px,8vw,112px);overflow:hidden} .cta .wrap{position:relative;max-width:940px;background:var(--ivory); border:1px solid var(--line);border-radius:5px; padding:clamp(34px,4vw,46px) clamp(26px,3.6vw,48px) clamp(34px,4vw,44px); display:grid;grid-template-columns:1.24fr .76fr;grid-template-rows:auto auto auto; gap:6px clamp(24px,3.4vw,44px);align-items:start; box-shadow:0 22px 46px -26px rgba(84,70,59,.5),0 2px 6px -3px rgba(84,70,59,.28); transform:rotate(-.7deg);transition:transform .55s var(--ease),box-shadow .55s var(--ease)} .cta .wrap:hover{transform:rotate(0deg) translateY(-7px); box-shadow:0 42px 74px -30px rgba(84,70,59,.55),0 3px 9px -4px rgba(84,70,59,.3)} .cta .wrap::before{content:"";position:absolute;top:-15px;left:16%; transform:rotate(-2.2deg);width:126px;height:29px; background:rgba(224,163,78,.45);border-radius:2px; box-shadow:0 3px 7px -4px rgba(84,70,59,.5)} .cta .sun-mini{display:none} .cta h2{font-family:'Cormorant',serif;font-weight:600;color:var(--ink); font-size:clamp(28px,3.9vw,46px);line-height:1.05;letter-spacing:-.022em;max-width:15ch} .cta h2 em{font-style:italic;color:var(--a-ink,var(--clay))} .cta .sub{color:var(--brown);font-size:16.5px;margin-top:12px;max-width:36ch} .cta-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px} .cta .btn-honey{background:#AE522C;color:#fff} .cta .btn-honey:hover{box-shadow:0 18px 40px -16px rgba(188,95,59,.7)} .cta .btn-cream-ghost{border-color:var(--ink);color:var(--ink)} .cta .btn-cream-ghost:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)} /* the direct-contact column */ .cta h2{grid-column:1;grid-row:1;align-self:end} .cta .sub{grid-column:1;grid-row:2} .cta-btns{grid-column:1;grid-row:3} .cta-direct{grid-column:2;grid-row:1/4} .cta-direct{border-left:1px solid var(--line);padding-left:clamp(20px,2.6vw,34px);align-self:stretch; display:flex;flex-direction:column;justify-content:center} .cta-direct .k{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin-bottom:12px} .cta-direct a{display:block;font-size:15.5px;color:var(--ink);padding:5px 0; border-bottom:1px solid transparent;width:max-content;transition:color .28s,border-color .28s} .cta-direct a:hover{color:var(--a-ink);border-color:var(--a-ink)} @media(max-width:820px){ .cta .wrap{grid-template-columns:1fr;grid-template-rows:none;gap:14px;transform:none} .cta h2,.cta .sub,.cta-btns,.cta-direct{grid-column:1;grid-row:auto} .cta .wrap:hover{transform:translateY(-4px)} .cta .wrap::before{left:50%;transform:translateX(-50%) rotate(-2deg)} .cta h2,.cta .sub{max-width:none} .cta-direct{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:20px} } @media(prefers-reduced-motion:reduce){ .cta .wrap{transform:none}.cta .wrap:hover{transform:translateY(-4px)} } /* the tilt widens the bounding box; on phones it costs a few px of overflow and buys nothing */ @media(max-width:640px){ .cta .wrap,.cta .wrap:hover{transform:none} .cta .wrap::before{width:106px;height:26px;top:-13px} } @media(prefers-reduced-motion:reduce){ .cta .wrap,.cta .wrap:hover{transform:none} } .cta .btn-honey:hover{box-shadow:0 18px 40px -16px rgba(222,211,187,.45)} /* --- footer --- */ footer{background:var(--cream);padding:72px 0 44px} .foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap} .foot-brand p{color:var(--mut);font-size:15px;margin-top:12px;max-width:32ch} .foot-cols{display:flex;gap:72px;flex-wrap:wrap} .foot-cols h5{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);margin-bottom:16px} .foot-cols a{display:block;font-size:15px;margin-bottom:11px;opacity:.85;transition:opacity .2s,padding .2s} .foot-cols a:hover{opacity:1;padding-left:4px} .foot-word{font-family:'Fraunces',serif;font-variation-settings:"opsz" 144;font-weight:600; font-size:clamp(90px,22vw,280px);line-height:.8;letter-spacing:-.04em;margin-top:60px; background:linear-gradient(180deg,var(--oat),transparent);-webkit-background-clip:text;background-clip:text;color:transparent} .foot-legal{margin-top:34px;padding-top:22px;border-top:1px solid var(--line); display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center} .foot-legal .ck-reopen{background:none;border:none;padding:0;margin:0;cursor:pointer; font-family:inherit;appearance:none;-webkit-appearance:none;line-height:inherit} .foot-legal a,.foot-legal .ck-reopen{font-size:13.5px;color:var(--mut); border-bottom:1px solid transparent;padding-bottom:2px;transition:color .25s,border-color .25s} .foot-legal a:hover,.foot-legal .ck-reopen:hover{color:var(--ink);border-color:var(--ink)} .foot-bot{margin-top:18px;padding-top:24px;border-top:1px solid var(--line);display:flex; justify-content:space-between;flex-wrap:wrap;gap:10px;color:var(--mut);font-size:13px} /* ========================================================================== STUDIO PAGE ========================================================================== */ /* --- timeline --- */ .timeline{border-top:1px solid rgba(84,70,59,.14)} .tl{display:grid;grid-template-columns:118px 1fr;gap:26px;padding:26px 0; border-bottom:1px solid rgba(84,70,59,.14);transition:padding .35s var(--ease)} .tl:hover{padding-left:12px} .tl .yr{font-family:'Cormorant',serif;font-weight:700;font-size:22px;color:var(--a-ink);line-height:1.3} .tl h3{font-family:'Cormorant',serif;font-weight:600;font-size:25px;letter-spacing:-.01em;line-height:1.25} .tl p{color:var(--brown);font-size:15.5px;margin-top:7px;line-height:1.6} /* --- team --- */ /* placeholder panel used until a real portrait exists */ .mono{aspect-ratio:4/5;border-radius:16px;background:var(--oat);position:relative;overflow:hidden; display:flex;align-items:center;justify-content:center} .mono::after{content:"";position:absolute;inset:0; background:repeating-linear-gradient(135deg,transparent 0 22px,rgba(84,70,59,.045) 22px 44px)} .mono span{font-family:'Cormorant',serif;font-weight:600;font-size:clamp(30px,3.4vw,42px); color:var(--a-ink);opacity:.5;letter-spacing:.02em;position:relative;z-index:1} /* team — founder featured, the rest as a trio */ .tm-lead{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(30px,4.6vw,72px); align-items:center;margin-bottom:clamp(58px,7vw,104px); padding-bottom:clamp(50px,6vw,86px);border-bottom:1px solid var(--line)} .tm-lead-pic .frame{aspect-ratio:4/5;border-radius:20px;overflow:hidden;border:1px solid var(--line)} .tm-lead-pic .frame img,.tm-lead-pic .frame picture{width:100%;height:100%;object-fit:cover;display:block} .tm-lead-pic .mono{aspect-ratio:4/5} .tm-num{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--a-ink);font-weight:500} .tm-lead-txt h3{font-family:'Cormorant',serif;font-weight:600; font-size:clamp(38px,5.4vw,72px);letter-spacing:-.025em;line-height:1;margin-top:14px} .tm-lead-txt .role{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin-top:14px} .tm-lead-txt p{color:var(--brown);font-size:clamp(16.5px,1.7vw,19px);line-height:1.66; margin-top:22px;max-width:44ch} .tm-mail{display:inline-flex;align-items:center;gap:9px;margin-top:26px;font-size:15px; font-weight:600;color:var(--a-ink);border-bottom:1.5px solid transparent;padding-bottom:3px; transition:border-color .3s,gap .3s} .tm-mail:hover{border-color:var(--a-ink);gap:14px} .tm-rest{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px)} .tm-item .frame{aspect-ratio:4/5;border-radius:16px;overflow:hidden;border:1px solid var(--line); margin-bottom:18px} .tm-item .frame img{width:100%;height:100%;object-fit:cover;display:block} .tm-item .mono{margin-bottom:18px} .tm-item h3{font-family:'Cormorant',serif;font-weight:600;font-size:clamp(23px,2.4vw,29px); letter-spacing:-.014em;line-height:1.14;margin-top:9px} .tm-item .role{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);margin-top:7px} .tm-item p{color:var(--brown);font-size:15px;line-height:1.6;margin-top:12px} @media(max-width:900px){ .tm-lead{grid-template-columns:1fr;gap:26px;align-items:start} .tm-lead-pic{max-width:340px} .tm-rest{grid-template-columns:1fr;gap:38px;max-width:340px} .tm-item .frame,.tm-item .mono{max-width:280px} } .team-note{margin-top:44px;padding-top:22px;border-top:1px solid var(--line); color:var(--mut);font-size:14.5px;text-align:center} .team-note a{color:var(--a-ink);font-weight:500} /* --- wide image band --- */ .band{padding:0} .band .frame{aspect-ratio:21/9;border-radius:0;border-left:none;border-right:none} @media(max-width:900px){ .team{grid-template-columns:1fr 1fr;gap:26px 20px} .tl{grid-template-columns:1fr;gap:6px} .band .frame{aspect-ratio:16/9} } @media(max-width:560px){.team{grid-template-columns:1fr;max-width:340px;margin:0 auto}} /* ========================================================================== BLOG ========================================================================== */ /* --- index listing --- */ .post-list{border-top:1px solid var(--line)} .post{display:grid;grid-template-columns:150px 1fr;gap:34px;padding:34px 6px; border-bottom:1px solid var(--line);transition:background .35s var(--ease),padding .35s var(--ease)} .post:hover{background:var(--a-soft);padding-left:18px;padding-right:18px} .post .side{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);line-height:1.9} .post .side b{display:block;font-weight:500;color:var(--a-ink);letter-spacing:.16em} .post h3{font-family:'Cormorant',serif;font-weight:600;font-size:30px;letter-spacing:-.015em;line-height:1.18; transition:color .3s} .post:hover h3{color:var(--a-ink)} .post p{color:var(--brown);font-size:16px;line-height:1.62;margin-top:10px;max-width:64ch} .post .by{margin-top:14px;font-size:13.5px;color:var(--mut)} .post .by em{font-style:normal;color:var(--brown)} /* --- featured --- */ .feature{display:block;border:1px solid var(--line);border-radius:20px;padding:44px 46px;background:var(--ivory); transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s} .feature:hover{transform:translateY(-5px);box-shadow:0 30px 60px -34px rgba(84,70,59,.45);border-color:#dccbb2} .feature .tagline{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--a-ink);font-weight:500} .feature h2{font-family:'Cormorant',serif;font-weight:600;font-size:clamp(30px,3.9vw,46px); line-height:1.1;letter-spacing:-.02em;margin-top:16px;max-width:20ch} .feature p{color:var(--brown);font-size:17px;line-height:1.64;margin-top:16px;max-width:62ch} .feature .by{margin-top:22px;font-size:14px;color:var(--mut)} .feature .by em{font-style:normal;color:var(--brown)} /* --- article --- */ .article{max-width:720px;margin:0 auto} .article-head{max-width:760px;margin:0 auto;text-align:center} .article-head h1{font-family:'Cormorant',serif;font-weight:600; font-size:clamp(36px,4.9vw,60px);line-height:1.08;letter-spacing:-.02em;margin-top:18px} .article-head h1 em{font-style:italic;color:var(--a-ink)} .byline{margin-top:30px;padding-top:22px;border-top:1px solid var(--line); display:flex;justify-content:center;gap:10px 22px;flex-wrap:wrap;font-size:13.5px;color:var(--mut)} .byline .who{color:var(--ink);font-weight:500} .article > p{font-size:17.5px;line-height:1.78;color:var(--brown);margin-top:26px} .article > p:first-child{font-size:19.5px;line-height:1.7;color:var(--ink)} .article h2{font-family:'Cormorant',serif;font-weight:600;font-size:clamp(27px,3.1vw,36px); line-height:1.2;letter-spacing:-.015em;color:var(--ink);margin-top:52px} .article ul{margin-top:22px;padding-left:0;list-style:none} .article li{position:relative;padding-left:28px;color:var(--brown);font-size:17px;line-height:1.72;margin-top:12px} .article li::before{content:"";position:absolute;left:6px;top:13px;width:7px;height:1.5px;background:var(--a-ink)} .article blockquote{margin:46px 0;padding:0 0 0 30px;border-left:2px solid var(--a-ink)} .article blockquote p{font-family:'Cormorant',serif;font-style:italic;font-weight:500; font-size:clamp(23px,2.7vw,30px);line-height:1.36;color:var(--ink)} .article strong{font-weight:600;color:var(--ink)} .article a{color:var(--a-ink);font-weight:500;text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:1px;text-decoration-color:rgba(0,0,0,.2)} .article a:hover{text-decoration-color:currentColor} .article-end{max-width:720px;margin:60px auto 0;padding-top:30px;border-top:1px solid var(--line); color:var(--mut);font-size:15px} .article-end a{color:var(--a-ink);font-weight:500} /* --- more posts --- */ .more{display:grid;grid-template-columns:1fr 1fr;gap:22px} .more a{display:block;border:1px solid var(--line);border-radius:16px;padding:28px 30px;background:var(--ivory); transition:transform .35s var(--ease),border-color .35s,box-shadow .35s var(--ease)} .more a:hover{transform:translateY(-4px);border-color:#dccbb2;box-shadow:0 22px 44px -30px rgba(84,70,59,.45)} .more .cat{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--a-ink)} .more h3{font-family:'Cormorant',serif;font-weight:600;font-size:24px;line-height:1.24;letter-spacing:-.01em;margin-top:10px} @media(max-width:820px){ .post{grid-template-columns:1fr;gap:12px} .post .side{line-height:1.7} .post .side b{display:inline;margin-right:14px} .feature{padding:34px 28px} .more{grid-template-columns:1fr} .article blockquote{margin:38px 0;padding-left:22px} } /* ========================================================================== PROOF GALLERY + CASE STUDY ========================================================================== */ /* proof intro — headline left, standfirst + contents index right */ .proof-intro .pi-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(34px,6vw,90px); align-items:start} .proof-intro{padding-bottom:clamp(56px,7vw,96px)} .proof-intro .pi-side{padding-top:6px} .proof-intro h1{max-width:none} .pi-side .lede{max-width:42ch;margin-top:0} .pi-index{list-style:none;margin-top:34px;padding:0;border-top:1px solid var(--line)} .pi-index li{border-bottom:1px solid var(--line)} .pi-index a{display:grid;grid-template-columns:34px 1fr auto;gap:16px;align-items:baseline; padding:11px 4px;transition:background .3s var(--ease),padding .3s var(--ease)} .pi-index a:hover{background:var(--a-soft);padding-left:12px;padding-right:12px} .pi-index i{font-style:normal;font-family:'Cormorant',serif;font-weight:600;font-size:14px;color:var(--mut)} .pi-index span{font-size:15.5px;color:var(--ink)} .pi-index a:hover span{color:var(--a-ink)} .pi-index b{font-family:'Cormorant',serif;font-weight:700;font-size:19px;color:var(--a-ink); letter-spacing:-.01em} @media(max-width:900px){ .proof-intro .pi-grid{grid-template-columns:1fr;gap:30px;align-items:start} .pi-index{margin-top:26px} } /* ========================================================================== PROOF — editorial portfolio composition ========================================================================== */ .ed{--gutter:clamp(20px,4vw,64px)} .ed-item{position:relative;display:block} /* shared type hierarchy: number -> name -> services -> note -> result -> link */ .ed-num{display:flex;align-items:center;gap:12px;font-family:'Cormorant',serif;font-weight:600; font-size:15px;color:var(--mut);letter-spacing:.06em} .ed-num b{color:var(--a-ink);font-weight:600;font-size:19px} .ed-num i{font-style:normal;width:34px;height:1px;background:var(--line)} .ed-name{font-family:'Cormorant',serif;font-weight:600;letter-spacing:-.028em;line-height:.96; margin-top:14px;transition:color .45s var(--ease)} .ed-item:hover .ed-name{color:var(--a-ink)} .ed-svc{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mut);margin-top:16px} .ed-desc{color:var(--brown);line-height:1.62;margin-top:18px} .ed-res{display:flex;align-items:baseline;gap:14px;margin-top:26px;padding-top:20px; border-top:1px solid var(--line);transition:border-color .45s var(--ease)} .ed-item:hover .ed-res{border-color:var(--a-ink)} .ed-res b{font-family:'Cormorant',serif;font-weight:700;color:var(--a-ink);line-height:.9; letter-spacing:-.03em} .ed-res span{font-size:14px;color:var(--brown);line-height:1.4} .ed-go{display:inline-flex;align-items:center;gap:10px;margin-top:24px;font-size:14.5px; font-weight:600;color:var(--ink);position:relative;padding-bottom:4px} .ed-go::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:22px; background:var(--a-ink);transition:width .5s var(--ease)} .ed-item:hover .ed-go::after{width:100%} .ed-go svg{transition:transform .45s var(--ease)} .ed-item:hover .ed-go svg{transform:translateX(6px)} /* the imagery: the work is the subject, the frame is invisible */ .ed-img{position:relative;overflow:hidden;background:var(--cream)} .ed-img img{width:100%;height:100%;object-fit:cover;display:block; transform:scale(1.001);transition:transform 1.1s var(--ease)} .ed-item:hover .ed-img img{transform:scale(1.035)} /* 01 — feature. widest imagery, biggest type, most air */ .ed-feature{margin-bottom:clamp(48px,5.5vw,80px)} .ed-feature .ed-img{aspect-ratio:16/9;width:min(100%,1040px)} .ed-feature .ed-name{font-size:clamp(42px,6.2vw,82px)} .ed-feature .ed-foot{display:grid;grid-template-columns:1.15fr .85fr;gap:56px; align-items:start;margin-top:36px;max-width:1040px} .ed-feature .ed-desc{font-size:clamp(17px,1.8vw,20px);max-width:46ch} .ed-feature .ed-res b{font-size:clamp(46px,6vw,76px)} .ed-feature .ed-res{border-top:none;padding-top:0;margin-top:8px} /* 02 / 04 — offset medium, text beside the image */ .ed-offset{display:grid;gap:clamp(34px,5vw,72px);align-items:center; margin-bottom:clamp(80px,10vw,150px)} .ed-offset.right{grid-template-columns:.72fr 1.28fr;width:100%} .ed-offset.left {grid-template-columns:1.28fr .72fr;width:100%} .ed-offset .ed-img{aspect-ratio:4/3} .ed-offset .ed-name{font-size:clamp(34px,4.8vw,64px)} .ed-offset .ed-desc{font-size:16.5px;max-width:40ch} .ed-offset .ed-res b{font-size:clamp(36px,4.4vw,54px)} .ed-offset.left .ed-txt{order:2} .ed-offset.left .ed-img{order:1} /* 03 — full-bleed wide */ .ed-wide{margin-bottom:clamp(80px,10vw,150px)} .ed-wide .ed-img{aspect-ratio:16/9;width:auto;margin-inline:-28px} .ed-wide .ed-foot{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;margin-top:34px;align-items:end} .ed-wide .ed-name{font-size:clamp(36px,5vw,68px)} .ed-wide .ed-desc{font-size:17px;max-width:44ch} .ed-wide .ed-res b{font-size:clamp(40px,5vw,64px)} @media(min-width:1252px){.ed-wide .ed-img{margin-inline:-64px}} /* 05 — the closer. info left, graphic right */ .ed-large{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(34px,5vw,72px); align-items:center;margin-bottom:clamp(70px,8vw,120px);width:100%} .ed-large .ed-img{aspect-ratio:3/2} .ed-large .ed-name{font-size:clamp(34px,4.8vw,64px)} .ed-large .ed-desc{font-size:16.5px;max-width:38ch} .ed-large .ed-res b{font-size:clamp(36px,4.4vw,54px)} /* rules between movements */ .ed-rule{height:1px;background:var(--line);margin:0 0 clamp(66px,8vw,120px)} @media(max-width:900px){ .ed-feature .ed-img{margin-inline:0;aspect-ratio:4/3} .ed-feature .ed-foot,.ed-wide .ed-foot{grid-template-columns:1fr;gap:26px} .ed-offset.right,.ed-offset.left{grid-template-columns:1fr;width:100%} .ed-offset.left .ed-txt,.ed-offset.left .ed-img{order:0} .ed-offset .ed-img,.ed-large .ed-img{aspect-ratio:4/3} .ed-wide .ed-img{aspect-ratio:4/3;width:auto;margin-inline:0} .ed-large{grid-template-columns:1fr;gap:26px;align-items:start;width:100%} .ed-feature .ed-name{font-size:clamp(40px,11vw,64px)} .ed-item:hover .ed-img img{transform:none} .ed-item:hover .ed-go::after{width:22px} } @media(prefers-reduced-motion:reduce){ .ed-img img,.ed-go::after,.ed-go svg{transition:none!important} .ed-item:hover .ed-img img{transform:none!important} } /* case study */ .cs-hero .shot{aspect-ratio:16/9;margin-top:44px} .cs-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:56px; padding-top:34px;border-top:1px solid var(--line)} .cs-fact .n{font-family:'Cormorant',serif;font-weight:700;font-size:clamp(38px,4.6vw,56px); line-height:1;color:var(--a-ink)} .cs-fact .k{font-size:14px;color:var(--ink);margin-top:10px;font-weight:500} .cs-fact .s{font-size:13px;color:var(--mut);margin-top:3px} .cs-block{display:grid;grid-template-columns:230px 1fr;gap:44px;padding:40px 0;border-bottom:1px solid var(--line)} .cs-block:last-child{border-bottom:none} .cs-block h2{font-family:'Cormorant',serif;font-weight:600;font-size:30px;letter-spacing:-.014em;line-height:1.2} .cs-block p{color:var(--brown);font-size:17px;line-height:1.72} .cs-block p + p{margin-top:16px} .cs-step{padding:20px 0;border-bottom:1px solid var(--line)} .cs-step:last-child{border-bottom:none} .cs-step h3{font-family:'Cormorant',serif;font-weight:600;font-size:24px;letter-spacing:-.01em} .cs-step p{margin-top:7px;font-size:16px} .cs-quote{margin:0;padding:34px 0 0} .cs-quote p{font-family:'Cormorant',serif;font-style:italic;font-weight:500; font-size:clamp(24px,2.9vw,34px);line-height:1.34;color:var(--ink);max-width:24ch} .cs-next{display:grid;grid-template-columns:1fr 1fr;gap:22px} @media(max-width:900px){ .cs-facts{grid-template-columns:1fr;gap:30px} .cs-block{grid-template-columns:1fr;gap:14px;padding:30px 0} .cs-next{grid-template-columns:1fr} } /* header sitting over a dark hero */ body.dark-hero header:not(.scrolled) .brand, body.dark-hero header:not(.scrolled) .nav-links a.link, body.dark-hero header:not(.scrolled) .nav-dd .dd-trigger{color:var(--cream)} body.dark-hero header:not(.scrolled) .nav-links a.link::after, body.dark-hero header:not(.scrolled) .nav-dd .dd-trigger::after{background:var(--honey)} body.dark-hero header:not(.scrolled) .burger span{background:var(--cream)} /* ========================================================================== CONTACT ========================================================================== */ .ct{position:relative;min-height:min(860px,92vh);display:flex;align-items:center; padding:150px 0 96px;overflow:hidden} .ct-bg{position:absolute;inset:0;z-index:0;background:radial-gradient(120% 100% at 12% 30%,#4A3B2E 0%,#2C231D 55%,#221B16 100%); display:flex;align-items:center;justify-content:flex-start} .ct-bg img{width:min(680px,52%);height:auto;object-fit:contain;margin-left:4%} .ct-bg .slot{background:repeating-linear-gradient(135deg,transparent 0 16px,rgba(251,246,236,.05) 16px 32px),#3A2F27} .ct-bg .slot .tag,.ct-bg .slot .dim{color:#9d8f7e} .ct-bg .slot .nm{color:#c4b39d} .ct-bg::after{content:"";position:absolute;inset:0; background:radial-gradient(70% 90% at 22% 50%,rgba(34,27,22,.55) 0%,rgba(34,27,22,.88) 70%)} .ct .wrap{position:relative;z-index:1} .ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center} .ct h1{font-family:'Cormorant',serif;font-weight:600;color:var(--cream); font-size:clamp(42px,5.6vw,72px);line-height:1.04;letter-spacing:-.02em} .ct h1 em{font-style:italic;color:var(--honey)} .ct .lede{color:#e2d5c3;font-size:18px;line-height:1.64;margin-top:24px;max-width:42ch} .ct-lines{margin-top:36px;padding-top:26px;border-top:1px solid rgba(251,246,236,.2)} .ct-lines a,.ct-lines div{display:block;color:var(--cream);font-size:16.5px;margin-bottom:12px} .ct-lines a{font-weight:500;border-bottom:1px solid rgba(251,246,236,.32); display:inline-block;padding-bottom:2px;transition:border-color .3s,color .3s} .ct-lines a:hover{color:var(--honey);border-color:var(--honey)} .ct-lines .lbl{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#b7a48c;margin-bottom:5px} /* form — set into the page, not floating on it */ .form{background:transparent;border-radius:0;padding:0;box-shadow:none; border-left:1px solid rgba(251,246,236,.22);padding-left:clamp(26px,3.4vw,52px)} .form-head{padding-bottom:22px;margin-bottom:26px;border-bottom:1px solid rgba(251,246,236,.18)} .form-step{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--honey)} .form h2{font-family:'Cormorant',serif;font-weight:600;font-size:clamp(28px,3.2vw,40px); letter-spacing:-.018em;color:var(--cream);margin-top:10px;line-height:1.05} .form .sub{color:#cbbba4;font-size:15px;margin-top:8px} .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px 26px;margin-top:0} .field{display:flex;flex-direction:column} .field.full{grid-column:1/-1} .field label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#a8977f;margin-bottom:9px} .field label .req{color:var(--honey)} .field input,.field select,.field textarea{font-family:'Jost',sans-serif;font-size:16.5px; color:var(--cream);background:transparent;border:none;border-bottom:1px solid rgba(251,246,236,.26); border-radius:0;padding:8px 0 11px;transition:border-color .3s var(--ease)} .field textarea{resize:vertical;min-height:88px;line-height:1.55} .field input:hover,.field select:hover,.field textarea:hover{border-bottom-color:rgba(251,246,236,.5)} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--honey)} .field input::placeholder,.field textarea::placeholder{color:#7d6e5c} .field select{appearance:none;cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,#a8977f 50%),linear-gradient(135deg,#a8977f 50%,transparent 50%); background-position:calc(100% - 12px) 18px,calc(100% - 7px) 18px;background-size:5px 5px;background-repeat:no-repeat} .field select option{background:#2C231D;color:var(--cream)} .form .send{margin-top:30px;border:none;font-family:'Jost',sans-serif; background:var(--honey);color:var(--ink);padding:15px 30px} .form .send:hover{box-shadow:0 18px 40px -16px rgba(224,163,78,.55)} .hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none} .form-note{margin-top:14px;font-size:15px;line-height:1.5;min-height:1px} .form-note.ok{color:var(--honey)} .form-note.err{color:#F0A08A} .form .fine{font-size:13px;color:#a8977f;margin-top:16px;line-height:1.55} .form .fine a{color:var(--honey);text-decoration:underline;text-underline-offset:2px} /* what happens next */ .next-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px} .next-steps .st{padding-top:22px;border-top:2px solid var(--a-ink)} .next-steps .st .n{font-family:'Cormorant',serif;font-weight:600;font-size:15px;color:var(--a-ink)} .next-steps .st h3{font-family:'Cormorant',serif;font-weight:600;font-size:25px;margin-top:10px;letter-spacing:-.01em} .next-steps .st p{color:var(--brown);font-size:15.5px;line-height:1.6;margin-top:9px} @media(max-width:900px){ .ct{padding:126px 0 72px} .ct-grid{grid-template-columns:1fr;gap:44px} .form{padding-left:0;border-left:none;border-top:1px solid rgba(251,246,236,.22);padding-top:30px} .fgrid{grid-template-columns:1fr} .next-steps{grid-template-columns:1fr;gap:26px} } /* ========================================================================== CASE STUDY — editorial feature layout (light, floating product graphics) ========================================================================== */ .bleed{width:100vw;margin-left:calc(50% - 50vw)} .cs-open{padding:150px 0 74px;overflow:hidden} .cs-open .grid{display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:center} .cs-open .grid.solo{grid-template-columns:1fr;max-width:26ch} .cs-open .grid.solo h1{max-width:none} .cs-open .grid.solo .cs-bar{max-width:640px} .cs-open .kick{display:flex;align-items:center;gap:14px;color:var(--mut);font-size:12px; letter-spacing:.22em;text-transform:uppercase;font-weight:500} .cs-open .kick .rule{height:1px;width:44px;background:var(--a-ink)} .cs-open h1{font-family:'Cormorant',serif;font-weight:600; font-size:clamp(44px,6.2vw,84px);line-height:1;letter-spacing:-.025em;margin-top:20px;max-width:13ch} .cs-open .sub{color:var(--brown);font-size:clamp(17px,1.7vw,19.5px);line-height:1.62;margin-top:22px;max-width:46ch} .cs-bar{display:grid;grid-template-columns:1fr 1fr;gap:24px 34px;margin-top:40px; padding-top:26px;border-top:1px solid var(--line)} .cs-bar dt{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)} .cs-bar dd{font-family:'Cormorant',serif;font-weight:600;font-size:21px;color:var(--ink);margin-top:6px;line-height:1.25} /* floating graphic: no frame, no border — the image background is the page */ .float{position:relative;display:block} .float img,.float picture{display:block;width:100%;height:auto} .float .slot{position:relative;inset:auto;aspect-ratio:4/3;border-radius:18px;border:1px dashed var(--line)} .float.wide .slot{aspect-ratio:21/9} .float.sq .slot{aspect-ratio:1/1} .pull{font-family:'Cormorant',serif;font-weight:600;font-size:clamp(28px,4vw,50px); line-height:1.14;letter-spacing:-.02em;max-width:22ch;margin:0 auto;text-align:center} .pull em{font-style:italic;color:var(--a-ink)} .cs-figs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line); border-bottom:1px solid var(--line)} .cs-figs .f{padding:44px 34px;text-align:center;border-right:1px solid var(--line)} .cs-figs .f:last-child{border-right:none} .cs-figs .n{font-family:'Cormorant',serif;font-weight:700;font-size:clamp(44px,6vw,76px); line-height:1;color:var(--a-ink)} .cs-figs .k{font-size:14.5px;color:var(--ink);margin-top:14px;font-weight:500} .cs-figs .s{font-size:13px;color:var(--mut);margin-top:4px} .cs-two{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .cs-two h2{font-family:'Cormorant',serif;font-weight:600;font-size:clamp(30px,3.7vw,44px); letter-spacing:-.018em;line-height:1.12} .cs-two h2 em{font-style:italic;color:var(--a-ink)} .cs-two p{color:var(--brown);font-size:17px;line-height:1.72;margin-top:18px} .cs-band{position:relative;overflow:hidden;background:var(--oat)} .cs-band .float{max-width:1320px;margin:0 auto;padding:56px 28px} .cs-work{counter-reset:w} .cs-work .w{display:grid;grid-template-columns:64px 1fr;gap:26px;padding:30px 0;border-bottom:1px solid var(--line)} .cs-work .w:last-child{border-bottom:none} .cs-work .w .i{font-family:'Cormorant',serif;font-weight:700;font-size:34px;color:var(--a-ink);line-height:1} .cs-work .w h3{font-family:'Cormorant',serif;font-weight:600;font-size:27px;letter-spacing:-.012em} .cs-work .w p{color:var(--brown);font-size:16.5px;line-height:1.68;margin-top:8px;max-width:62ch} .cs-cta-next{position:relative;display:block;overflow:hidden;background:var(--ink);min-height:400px} .cs-cta-next .bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center} .cs-cta-next .bg img{width:min(560px,64%);height:auto;object-fit:contain;opacity:.28; transition:transform .8s var(--ease),opacity .5s} .cs-cta-next:hover .bg img{transform:scale(1.05);opacity:.4} .cs-cta-next .inner{position:relative;z-index:1;padding:96px 0;text-align:center} .cs-cta-next .lbl{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--honey)} .cs-cta-next h2{font-family:'Cormorant',serif;font-weight:600;color:var(--cream); font-size:clamp(34px,5vw,62px);line-height:1.06;letter-spacing:-.02em;margin-top:14px} .cs-cta-next .go{display:inline-flex;align-items:center;gap:10px;margin-top:22px;color:var(--cream); font-size:15.5px;font-weight:500;border-bottom:1.5px solid rgba(251,246,236,.4);padding-bottom:3px;transition:gap .3s,border-color .3s} .cs-cta-next:hover .go{gap:16px;border-color:var(--honey)} @media(max-width:900px){ .cs-open{padding:126px 0 50px;min-height:auto} .cs-bar{gap:22px 34px} .cs-figs{grid-template-columns:1fr} .cs-figs .f{border-right:none;border-bottom:1px solid var(--line);padding:32px 20px} .cs-figs .f:last-child{border-bottom:none} .cs-two{grid-template-columns:1fr;gap:30px} .cs-band .frame{aspect-ratio:16/9} .cs-work .w{grid-template-columns:44px 1fr;gap:16px} } /* ========================================================================== BLOG — broadsheet ========================================================================== */ .paper{border-bottom:3px double var(--ink);padding-bottom:16px} .paper .rule-top{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink); display:flex;justify-content:space-between;gap:16px;padding:7px 2px; font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brown)} .nameplate{font-family:'Fraunces',serif;font-variation-settings:"opsz" 144;font-weight:600; text-align:center;font-size:clamp(52px,11vw,140px);line-height:.94;letter-spacing:-.035em; margin:22px 0 14px;color:var(--ink)} .nameplate span{color:var(--honey)} .paper .dateline{display:flex;justify-content:space-between;gap:16px;padding:8px 2px 0; border-top:1px solid var(--ink);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--brown)} .paper .dateline em{font-style:italic;text-transform:none;letter-spacing:0;font-size:14px; font-family:'Cormorant',serif;color:var(--ink)} .lead{display:grid;grid-template-columns:1.55fr 1fr;gap:0;margin-top:42px; border-bottom:1px solid var(--line)} .lead .main{display:block;padding:0 44px 44px 0;border-right:1px solid var(--line)} .lead .side{padding:0 0 44px 44px} .kicker-line{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--a-ink);font-weight:600} .lead h2{font-family:'Cormorant',serif;font-weight:700;font-size:clamp(34px,4.9vw,60px); line-height:1.03;letter-spacing:-.024em;margin-top:12px} .lead .standfirst{font-family:'Cormorant',serif;font-size:clamp(19px,2vw,24px);line-height:1.4; color:var(--brown);margin-top:16px;font-style:italic} .lead .cols{column-count:2;column-gap:34px;column-rule:1px solid var(--line);margin-top:24px} .lead .cols p{color:var(--brown);font-size:15.5px;line-height:1.68} .lead .cols p:first-child::first-letter{float:left;font-family:'Cormorant',serif;font-weight:700; font-size:64px;line-height:.82;padding:5px 10px 0 0;color:var(--a-ink)} .byline-np{margin-top:20px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)} .byline-np b{color:var(--ink);font-weight:600} .side .brief{display:block;padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid var(--line)} .side .brief:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0} .side .brief h3{font-family:'Cormorant',serif;font-weight:600;font-size:25px;line-height:1.18; letter-spacing:-.012em;margin-top:9px;transition:color .3s} .side .brief:hover h3{color:var(--a-ink)} .side .brief p{color:var(--brown);font-size:14.5px;line-height:1.6;margin-top:9px} .side .brief .m{margin-top:10px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)} .np-more{margin-top:0;border-top:1px solid var(--ink);padding-top:10px} .np-more .hd{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--brown); border-bottom:1px solid var(--line);padding-bottom:10px} .np-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0} .np-grid a{display:block;padding:30px 30px 34px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)} .np-grid a:nth-child(3n){border-right:none} .np-grid a:hover{background:var(--a-soft)} .np-grid h3{font-family:'Cormorant',serif;font-weight:600;font-size:26px;line-height:1.16; letter-spacing:-.012em;margin-top:10px} .np-grid p{color:var(--brown);font-size:14.5px;line-height:1.6;margin-top:10px} .np-grid .m{margin-top:14px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)} /* article, newspaper furniture */ .article .dateline-a{text-align:center;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase; color:var(--mut);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:9px 0;margin-bottom:34px} .article > p:first-of-type::first-letter{float:left;font-family:'Cormorant',serif;font-weight:700; font-size:78px;line-height:.78;padding:8px 12px 0 0;color:var(--a-ink)} @media(max-width:900px){ .lead{grid-template-columns:1fr} .lead .main{padding:0 0 34px;border-right:none;border-bottom:1px solid var(--line)} .lead .side{padding:34px 0 0} .lead .cols{column-count:1} .np-grid{grid-template-columns:1fr} .np-grid a{border-right:none} .nameplate{font-size:clamp(44px,15vw,90px)} .paper .rule-top,.paper .dateline{font-size:9.5px;letter-spacing:.12em} } /* ========================================================================== METERS — counting stats that draw left to right ========================================================================== */ .meters{border-top:1px solid var(--line)} .meter{position:relative;display:grid;grid-template-columns:58px minmax(0,1fr) auto; gap:0 36px;align-items:baseline;padding:34px 0 30px;border-bottom:1px solid var(--line); overflow:hidden} .meter .ix{font-family:'Cormorant',serif;font-weight:600;font-size:16px;color:var(--mut); letter-spacing:.06em;align-self:center} .meter .n{font-family:'Cormorant',serif;font-weight:700;letter-spacing:-.03em;line-height:.92; font-size:clamp(52px,8.5vw,104px);color:var(--a-ink);font-variant-numeric:lining-nums tabular-nums; white-space:nowrap} .meter .txt{display:block;text-align:right;align-self:center;padding-left:24px;max-width:34ch} .meter .k{display:block;font-family:'Cormorant',serif;font-weight:600;font-size:clamp(20px,2.2vw,27px); color:var(--ink);letter-spacing:-.01em;line-height:1.2} .meter .s{display:block;font-size:14px;color:var(--mut);margin-top:5px} /* the sweep: a rule that draws across the row as the figure counts */ .meter .bar{grid-column:1/-1;position:relative;height:2px;background:var(--line);margin-top:26px} .meter .bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--a-ink); transition:width 1.6s cubic-bezier(.22,.61,.36,1)} .meter.run .bar i{width:100%} /* the number and its text slide in from the left as the sweep passes */ .meter .n,.meter .txt{opacity:0;transform:translateX(-26px); transition:opacity .8s var(--ease),transform .9s var(--ease)} .meter .txt{transform:translateX(26px)} .meter.run .n,.meter.run .txt{opacity:1;transform:none} .meter:nth-child(2) .n,.meter:nth-child(2) .txt{transition-delay:.14s} .meter:nth-child(3) .n,.meter:nth-child(3) .txt{transition-delay:.28s} .meter:nth-child(2) .bar i{transition-delay:.14s} .meter:nth-child(3) .bar i{transition-delay:.28s} /* a faint wash that follows the sweep */ .meter::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--a-soft); transition:width 1.7s cubic-bezier(.22,.61,.36,1);z-index:-1;pointer-events:none} .meter.run::before{width:100%} .meter:nth-child(2)::before{transition-delay:.14s} .meter:nth-child(3)::before{transition-delay:.28s} @media(max-width:760px){ .meter{grid-template-columns:38px 1fr;gap:0 16px;padding:26px 0 24px} .meter .txt{grid-column:2;text-align:left;padding-left:0;margin-top:12px;transform:translateX(-20px)} .meter .bar{margin-top:20px} } @media(prefers-reduced-motion:reduce){ .meter .n,.meter .txt{opacity:1!important;transform:none!important} .meter .bar i,.meter::before{transition:none!important} .meter.run .bar i{width:100%} } /* ========================================================================== STUDIO — the wall. pinned prints and cards, not a typeset page. ========================================================================== */ .wall-open{padding:clamp(96px,12vh,140px) 0 clamp(40px,5vw,64px)} .wall-open .slug{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mut)} .wall-open h1{font-family:'Cormorant',serif;font-weight:600;letter-spacing:-.028em;line-height:1.01; font-size:clamp(42px,7.6vw,112px);max-width:15ch;margin-top:18px} .wall-open h1 em{font-style:italic;color:var(--a-ink)} .wall-open .sub{color:var(--brown);font-size:clamp(16.5px,1.8vw,20px);line-height:1.62; margin-top:24px;max-width:50ch} /* every pinned thing shares this */ .pinned{position:relative;background:var(--ivory);border:1px solid var(--line);border-radius:4px; box-shadow:0 14px 30px -20px rgba(84,70,59,.5), 0 2px 5px -3px rgba(84,70,59,.28); transform:rotate(var(--rot,0deg)); transition:transform .5s var(--ease),box-shadow .5s var(--ease)} /* the reveal animation also drives transform, so compose the two explicitly */ .pinned.reveal{transform:translateY(28px) rotate(var(--rot,0deg))} .pinned.reveal.in{transform:rotate(var(--rot,0deg))} .pinned:hover,.pinned.reveal.in:hover{transform:rotate(0deg) translateY(-7px); box-shadow:0 30px 56px -26px rgba(84,70,59,.55), 0 3px 8px -4px rgba(84,70,59,.3)} .pinned .pin{position:absolute;top:-7px;left:50%;transform:translateX(-50%); width:13px;height:13px;border-radius:50%;background:var(--clay);z-index:2; box-shadow:0 3px 6px -2px rgba(84,70,59,.6), inset 0 -2px 3px rgba(0,0,0,.22), inset 0 2px 2px rgba(255,255,255,.35)} .pinned .tape{position:absolute;top:-11px;left:50%;transform:translateX(-50%) rotate(-1.6deg); width:88px;height:23px;background:rgba(224,163,78,.42);border-radius:2px;z-index:2; box-shadow:0 2px 5px -3px rgba(84,70,59,.5)} /* THE TEAM — four pinned prints */ .wall-team{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,36px); margin-top:clamp(34px,4vw,56px);align-items:start} .print{padding:12px 12px 0} .wall-team .print:nth-child(1){--rot:-1.4deg;margin-top:14px} .wall-team .print:nth-child(2){--rot:.9deg;margin-top:0} .wall-team .print:nth-child(3){--rot:-.7deg;margin-top:26px} .wall-team .print:nth-child(4){--rot:1.5deg;margin-top:8px} .print .shot{aspect-ratio:4/5;overflow:hidden;background:var(--oat);border-radius:2px} .print .shot img,.print .shot picture{width:100%;height:100%;object-fit:cover;display:block} .print .cap{padding:16px 4px 20px} .print .nm{font-family:'Cormorant',serif;font-weight:600;font-size:clamp(19px,1.9vw,24px); letter-spacing:-.012em;line-height:1.14} .print .rl{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--a-ink); margin-top:7px;line-height:1.5} .print .bio{color:var(--brown);font-size:14.5px;line-height:1.6;margin-top:11px} /* pinned index cards — principles */ .wall-cards{columns:3;column-gap:clamp(18px,2.4vw,32px);margin-top:clamp(30px,3.6vw,48px)} .wall-cards .card-note{break-inside:avoid;margin-bottom:clamp(18px,2.4vw,32px);padding:24px 24px 26px} .wall-cards .card-note:nth-child(3n+1){--rot:-.8deg} .wall-cards .card-note:nth-child(3n+2){--rot:1deg} .wall-cards .card-note:nth-child(3n+3){--rot:-.5deg} .card-note .ix{font-family:'Cormorant',serif;font-weight:600;font-size:13px;color:var(--a-ink); letter-spacing:.08em} .card-note h3{font-family:'Cormorant',serif;font-weight:600;font-size:clamp(21px,2.2vw,27px); letter-spacing:-.014em;line-height:1.16;margin-top:9px} .card-note p{color:var(--brown);font-size:14.5px;line-height:1.62;margin-top:10px} /* a taped strip — the record */ .wall-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px); margin-top:clamp(38px,4.4vw,58px)} .wall-strip .ent{padding:30px 24px 26px} .wall-strip .ent:nth-child(1){--rot:.7deg} .wall-strip .ent:nth-child(2){--rot:-1deg;margin-top:18px} .wall-strip .ent:nth-child(3){--rot:.5deg;margin-top:6px} .wall-strip .yr{font-family:'Cormorant',serif;font-weight:700;font-size:clamp(26px,3vw,38px); color:var(--a-ink);line-height:1;letter-spacing:-.02em} .wall-strip h3{font-family:'Cormorant',serif;font-weight:600;font-size:20px;margin-top:11px;line-height:1.2} .wall-strip p{color:var(--brown);font-size:14.5px;line-height:1.6;margin-top:8px} /* a pinned note — facts + colophon side by side */ .wall-notes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,38px); margin-top:clamp(38px,4.4vw,58px);align-items:start} .wall-notes .note{padding:26px 26px 28px} .wall-notes .note:nth-child(1){--rot:-.7deg} .wall-notes .note:nth-child(2){--rot:.8deg;margin-top:20px} .wall-notes h4{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut); padding-bottom:12px;border-bottom:1px solid var(--line)} .wall-notes .r{display:flex;justify-content:space-between;gap:14px;align-items:baseline; padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--brown)} .wall-notes .r:last-child{border-bottom:none} .wall-notes .r b{font-weight:600;color:var(--ink);font-family:'Cormorant',serif;font-size:17px} .wall-notes .hex{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--mut)} .wall-notes .sw{display:inline-block;width:13px;height:13px;border-radius:3px; border:1px solid rgba(84,70,59,.2);vertical-align:-2px;margin-right:8px} .wall-head{display:flex;align-items:baseline;gap:16px;margin-top:clamp(64px,8vw,112px)} .wall-head .n{font-family:'Cormorant',serif;font-weight:600;font-size:14px;color:var(--a-ink)} .wall-head h2{font-family:'Cormorant',serif;font-weight:600;letter-spacing:-.022em;line-height:1.05; font-size:clamp(28px,3.8vw,50px)} .wall-head h2 em{font-style:italic;color:var(--a-ink)} .wall-head p{color:var(--brown);font-size:16px;line-height:1.6;max-width:38ch;margin-left:auto} @media(max-width:1080px){ .wall-cards{columns:2} } @media(max-width:860px){ .wall-team{grid-template-columns:1fr 1fr;gap:20px} .wall-strip{grid-template-columns:1fr} .wall-strip .ent{margin-top:0} .wall-notes{grid-template-columns:1fr} .wall-notes .note:nth-child(2){margin-top:0} .wall-head{flex-direction:column;gap:10px} .wall-head p{margin-left:0} } @media(max-width:560px){ .wall-team{grid-template-columns:1fr;max-width:340px} .wall-team .print{margin-top:0!important} .wall-cards{columns:1} } @media(prefers-reduced-motion:reduce){ .pinned,.pinned.reveal,.pinned.reveal.in{transform:none!important;transition:none} .pinned:hover,.pinned.reveal.in:hover{transform:none!important} } /* ========================================================================== ACCENT — clay italic with a hand-drawn rule, on display headings only ========================================================================== */ /* not the hero h1s — those sit in .lines{overflow:hidden} for the reveal, which clips it */ .sec-head h2 em, .cta h2 em, .wall-head h2 em, .hw-head h2 em, .svc-left h2 em, .cs-two h2 em, .statement p em, .pull em, .sv-hero h1 em, .sec-head h2 em, .ed-name em, .st-open h1 em, .wall-open h1 em, .cs-open h1 em, .iv-open h1 em, .hero h1 em{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20200%209%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M1.5%206.1C33%202.6%2077%201.7%20119%203.6s58%203.6%2079.5%201.2%22%20fill=%22none%22%20stroke=%22%23BC5F3B%22%20stroke-width=%221.9%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:0 100%; background-size:100% .16em; padding-bottom:.10em; -webkit-box-decoration-break:clone;box-decoration-break:clone; } [data-accent="honey"] h1 em,[data-accent="honey"] h2 em,[data-accent="honey"] .statement p em{background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20200%209%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M1.5%206.1C33%202.6%2077%201.7%20119%203.6s58%203.6%2079.5%201.2%22%20fill=%22none%22%20stroke=%22%23B47A2A%22%20stroke-width=%221.9%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E")} [data-accent="sage"] h1 em,[data-accent="sage"] h2 em,[data-accent="sage"] .statement p em{background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20200%209%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M1.5%206.1C33%202.6%2077%201.7%20119%203.6s58%203.6%2079.5%201.2%22%20fill=%22none%22%20stroke=%22%235F7A55%22%20stroke-width=%221.9%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E")} /* dark grounds: the rule would disappear, so leave those clean */ .ct h1 em{background-image:none;padding-bottom:0} /* --- reveal --- */ .reveal{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease)} .reveal.in{opacity:1;transform:none} .reveal[data-d="1"]{transition-delay:.1s}.reveal[data-d="2"]{transition-delay:.2s}.reveal[data-d="3"]{transition-delay:.3s} /* ===== responsive ===== */ @media(max-width:980px){ .sv-grid{grid-template-columns:1fr;gap:48px} .sv-hero{padding:132px 0 78px} .sv-hero h1{max-width:18ch} .sv-hero .media{max-width:460px} .sv-process .inner{grid-template-columns:1fr;gap:44px} .sv-process .sticky{position:static} .spec-row{grid-template-columns:40px 1fr;gap:8px 20px} .spec-row p{grid-column:2} } @media(max-width:640px){ .nav-links{display:none}.burger{display:block} section{padding:84px 0} .sv-hero{padding:118px 0 66px} .sv-statement{padding:92px 0} .cta{padding:106px 0} .sv-hero .meta{grid-template-columns:1fr 1fr;gap:22px 26px} .qa summary{font-size:21px;padding:22px 4px} .qa details p{padding:0 32px 24px 4px} } @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition-duration:.001s!important} .lines>span,.fade{transform:none!important;opacity:1!important} html{scroll-behavior:auto}.cursor{display:none} }