/* ==========================================================================
   Gliqo — design system
   Editorial luxury. Large display type, hairline rules, paper grain,
   layered photography, brass accents. No card shadows anywhere.

   The only stylesheet the site loads.
   Order: tokens, reset, type, layout, components, motion, responsive.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */

:root{
    /* Terracotta, carried over from the brand and given a full tonal scale. */
    --clay-900:#572E20;
    --clay-800:#743B27;
    --clay-700:#94492F;
    --clay-600:#B2583A;
    --clay-500:#C86F4E;
    --clay-400:#DA9375;
    --clay-300:#E9BCA5;
    --clay-200:#F3D8C8;
    --clay-100:#F9E9DF;
    --clay-050:#FDF5F0;

    --ink:#1B120F;
    --ink-700:#4A3830;
    --ink-500:#6E5B51;
    --ink-300:#9C8C83;
    --ink-200:#C4B7AF;

    --midnight:#150E0B;

    --paper:#FFFCF9;
    --paper-2:#F8F2EC;
    --paper-3:#F0E7DE;

    /* One metal, used only for rules, numerals and small marks. */
    --brass:#A8874E;
    --brass-soft:rgba(168,135,78,.34);

    --line:rgba(27,18,15,.14);
    --line-soft:rgba(27,18,15,.07);
    --line-invert:rgba(255,255,255,.16);

    --font-display:'Fraunces', 'Cinzel', Georgia, serif;
    --font-body:'Inter', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:24px;
    --space-6:32px;
    --space-7:44px;
    --space-8:64px;
    --space-9:96px;
    --space-10:136px;

    --shell:1340px;
    --measure:66ch;
    --radius:2px;
    --header-h:88px;

    --ease:cubic-bezier(.22,.61,.36,1);
    --ease-soft:cubic-bezier(.33,1,.68,1);

    /* Paper grain, inline so it costs no request. */
    --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- reset -- */

*,
*::before,
*::after{
    box-sizing:border-box;
}

*{
    margin:0;
    padding:0;
}

html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body{
    position:relative;
    font-family:var(--font-body);
    font-size:16.5px;
    line-height:1.75;
    color:var(--ink-700);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
}

/* A whisper of grain so the flat areas read as paper rather than screen. */
body::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:1;
    pointer-events:none;
    background-image:var(--grain);
    opacity:.035;
    mix-blend-mode:multiply;
}

img,
picture,
svg,
video{
    display:block;
    max-width:100%;
}

ul,
ol{
    list-style:none;
}

a{
    color:inherit;
}

button,
input,
textarea,
select{
    font:inherit;
    color:inherit;
    background:none;
    border:0;
}

button{
    cursor:pointer;
}

:focus-visible{
    outline:2px solid var(--clay-700);
    outline-offset:3px;
}

::selection{
    background:var(--clay-200);
    color:var(--ink);
}

/* ----------------------------------------------------------- typography -- */

h1, h2, h3, h4{
    font-family:var(--font-display);
    font-weight:400;
    color:var(--ink);
    line-height:1.06;
    letter-spacing:-.02em;
    font-variation-settings:'SOFT' 0, 'WONK' 0;
    text-wrap:balance;
}

h1{
    font-size:clamp(2.35rem, 4.6vw, 4.1rem);
}

h2{
    font-size:clamp(1.85rem, 3.4vw, 3rem);
}

h3{
    font-size:1.24rem;
    line-height:1.24;
    letter-spacing:-.012em;
}

h4{
    font-size:1.02rem;
}

p{
    text-wrap:pretty;
}

strong{
    font-weight:600;
    color:var(--ink);
}

/* The tracked-out label that opens every section, with its brass tick. */
.section-tag,
.hero-eyebrow,
.section-title span{
    display:inline-flex;
    align-items:center;
    gap:var(--space-3);
    font-family:var(--font-body);
    font-size:11px;
    font-weight:600;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--clay-700);
    margin-bottom:var(--space-4);
}

.section-tag::before,
.hero-eyebrow::before,
.section-title span::before{
    content:"";
    width:26px;
    height:1px;
    background:var(--brass);
    flex:0 0 auto;
}

.page-lede,
.hero-lede{
    font-size:clamp(1.04rem, 1.5vw, 1.2rem);
    line-height:1.7;
    color:var(--ink-500);
    max-width:50ch;
}

.fineprint{
    font-size:13px;
    color:var(--ink-300);
    line-height:1.7;
}

/* --------------------------------------------------------------- layout -- */

.container{
    position:relative;
    z-index:2;
    width:min(100% - 2 * var(--space-5), var(--shell));
    margin-inline:auto;
}

/* A narrow measure must not re-centre the block, or its left edge stops
   lining up with the breadcrumbs and every other section on the page. */
.container.narrow{
    width:min(100% - 2 * var(--space-5), var(--shell));
}

.container.narrow > *{
    max-width:940px;
}

.section-padding{
    padding-block:var(--space-9);
}

.section-title{
    max-width:var(--measure);
    margin-bottom:var(--space-8);
}

.section-title h2{
    margin-top:var(--space-1);
}

.section-sub{
    margin-top:var(--space-4);
    color:var(--ink-500);
}

.two-col{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
    gap:var(--space-8) var(--space-9);
}

.two-col h2{
    margin-bottom:var(--space-5);
}

.two-col p{
    margin-bottom:var(--space-4);
    color:var(--ink-500);
}

/* ------------------------------------------------------------ utilities -- */

.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-link{
    position:absolute;
    left:-9999px;
    top:0;
    z-index:2000;
    background:var(--ink);
    color:#fff;
    padding:14px 22px;
    text-decoration:none;
    font-weight:600;
    font-size:14px;
}

.skip-link:focus{
    left:0;
}

.hp-field{
    position:absolute;
    left:-9999px;
    width:1px;
    height:1px;
    overflow:hidden;
}

/* -------------------------------------------------------------- buttons -- */

.btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:18px 34px;
    border:1px solid var(--clay-700);
    border-radius:var(--radius);
    background:var(--clay-700);
    color:#fff;
    font-family:var(--font-body);
    font-size:11.5px;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
    text-decoration:none;
    overflow:hidden;
    isolation:isolate;
    transition:color .4s var(--ease), border-color .4s var(--ease);
}

/* The fill wipes up from the bottom rather than snapping colour. */
.btn::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:var(--ink);
    transform:translateY(101%);
    transition:transform .45s var(--ease);
}

.btn:hover::before{
    transform:translateY(0);
}

.btn:hover{
    color:#fff;
    border-color:var(--ink);
}

.btn-ghost{
    background:transparent;
    border-color:var(--line);
    color:var(--ink);
}

.btn-ghost:hover{
    color:#fff;
    border-color:var(--ink);
}

.hero-actions,
.form-actions{
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-4);
    margin-top:var(--space-7);
}

/* The quiet link: a rule that draws itself. */
.card-link,
.prose a,
.section-sub a,
.contact-card a,
.contact-note a,
.footer-bottom a{
    color:var(--clay-700);
    text-decoration:none;
    background-image:linear-gradient(currentColor, currentColor);
    background-size:100% 1px;
    background-repeat:no-repeat;
    background-position:0 100%;
    padding-bottom:2px;
    transition:background-size .45s var(--ease), color .3s var(--ease);
}

.card-link:hover,
.prose a:hover,
.section-sub a:hover,
.contact-card a:hover,
.contact-note a:hover{
    color:var(--clay-900);
}

.card-link{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:11.5px;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
    background-size:0 1px;
}

.card-link::after{
    content:"\2192";
    transition:transform .45s var(--ease);
}

/* --------------------------------------------------------------- header -- */

.header{
    position:fixed;
    inset:0 0 auto 0;
    z-index:999;
    background:rgba(255,252,249,.86);
    backdrop-filter:saturate(150%) blur(14px);
    border-bottom:1px solid transparent;
    transition:border-color .4s var(--ease), background .4s var(--ease);
}

.header.scrolled{
    border-bottom-color:var(--line-soft);
    background:rgba(255,252,249,.97);
}

.header .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-6);
    height:var(--header-h);
}

.logo img{
    height:44px;
    width:auto;
}

.navbar ul{
    display:flex;
    align-items:center;
    gap:var(--space-7);
}

.navbar a{
    position:relative;
    font-size:12.5px;
    font-weight:500;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ink-500);
    text-decoration:none;
    padding-block:8px;
    transition:color .3s var(--ease);
}

.navbar a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:2px;
    width:0;
    height:1px;
    background:var(--clay-700);
    transition:width .45s var(--ease);
}

.navbar a:hover{
    color:var(--ink);
}

.navbar a:hover::after,
.navbar a.active::after{
    width:100%;
}

.navbar a.active{
    color:var(--ink);
}

.header-btn .btn{
    padding:14px 26px;
    font-size:10.5px;
}

.menu-btn{
    display:none;
    font-size:19px;
    color:var(--ink);
    padding:8px;
}

/* ----------------------------------------------------------------- hero -- */

.hero{
    position:relative;
    padding-top:calc(var(--header-h) + var(--space-8));
    padding-bottom:var(--space-9);
    overflow:hidden;
    background:
        radial-gradient(120% 90% at 88% 6%, var(--clay-050) 0%, transparent 60%),
        linear-gradient(180deg, var(--paper) 0%, var(--paper) 70%, var(--paper-2) 100%);
}

.hero-intro > *,
.about-wrapper > *,
.page-hero-grid > *,
.contact-grid > *,
.section-split > *{
    min-width:0;
}

.hero-intro{
    position:relative;
    z-index:2;
    width:min(100% - 2 * var(--space-5), var(--shell));
    margin-inline:auto;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:var(--space-9);
    align-items:center;
}

.hero-copy h1{
    max-width:14ch;
    margin-bottom:var(--space-6);
}

.hero-copy h1::after{
    content:"";
    display:block;
    width:96px;
    height:1px;
    background:var(--brass);
    margin-top:var(--space-6);
}

.hero-meta{
    display:grid;
    grid-template-columns:repeat(4, auto);
    justify-content:start;
    gap:var(--space-7);
    margin-top:var(--space-8);
    padding-top:var(--space-5);
    border-top:1px solid var(--line-soft);
}

.hero-meta div{
    display:grid;
    gap:2px;
}

.hero-meta dt{
    font-size:10px;
    font-weight:600;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--ink-300);
}

.hero-meta dd{
    font-family:var(--font-display);
    font-size:1rem;
    color:var(--ink);
}

/* The plate: a framed, slowly cycling product photograph. */
.hero-plate{
    position:relative;
    z-index:2;
    width:100%;
}

.hero-plate::before{
    content:"";
    position:absolute;
    inset:var(--space-6) calc(-1 * var(--space-6)) var(--space-8) var(--space-6);
    border:1px solid var(--brass-soft);
    pointer-events:none;
}

.heroSlider{
    position:relative;
    width:100%;
    overflow:hidden;
    background:var(--paper-2);
}

.hero-image{
    position:relative;
    overflow:hidden;
}

.hero-image img{
    width:100%;
    height:clamp(400px, 46vw, 620px);
    object-fit:cover;
    object-position:center;
}

/* Only the slide on screen drifts. Running six infinite scale animations at
   once is compositor work for five frames nobody can see. */
.swiper-slide-active .hero-image img{
    animation:plate-drift 20s ease-in-out infinite alternate;
}

@keyframes plate-drift{
    from{ transform:scale(1); }
    to{ transform:scale(1.07); }
}

.plate-caption{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:2;
    display:flex;
    align-items:baseline;
    gap:var(--space-4);
    padding:var(--space-8) var(--space-6) var(--space-5);
    color:#fff;
    background:linear-gradient(to top, rgba(21,14,11,.82) 0%, rgba(21,14,11,0) 100%);
}

.plate-index{
    font-family:var(--font-display);
    font-size:11.5px;
    letter-spacing:.18em;
    color:var(--clay-300);
}

.plate-name{
    font-family:var(--font-display);
    font-size:1.15rem;
    letter-spacing:-.01em;
}

.plate-controls{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-5);
    margin-top:var(--space-5);
    padding-left:var(--space-6);
}

.plate-arrows{
    display:flex;
    gap:var(--space-2);
}

.plate-arrows button{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border:1px solid var(--line);
    color:var(--ink);
    font-size:13px;
    transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}

.plate-arrows button:hover{
    background:var(--ink);
    border-color:var(--ink);
    color:#fff;
}

.swiper-pagination{
    position:static !important;
    display:flex;
    gap:8px;
}

.swiper-pagination-bullet{
    width:26px;
    height:2px;
    border-radius:0;
    background:var(--ink);
    opacity:.2;
    transition:opacity .35s var(--ease), background .35s var(--ease);
}

.swiper-pagination-bullet-active{
    opacity:1;
    background:var(--clay-600);
}

/* The three.js layers sit behind everything and never take clicks. */
.scene-layer{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
}

.scene-layer canvas{
    width:100% !important;
    height:100% !important;
}

/* -------------------------------------------------------------- marquee -- */

.marquee{
    border-block:1px solid var(--line-soft);
    padding-block:var(--space-5);
    overflow:hidden;
    background:var(--paper);
}

.marquee-track{
    display:flex;
    width:max-content;
    animation:marquee 52s linear infinite;
}

.marquee:hover .marquee-track{
    animation-play-state:paused;
}

.marquee-track > span{
    display:inline-flex;
    align-items:center;
    gap:var(--space-8);
    padding-right:var(--space-8);
    font-family:var(--font-display);
    font-size:clamp(1.05rem, 1.9vw, 1.6rem);
    letter-spacing:-.01em;
    color:var(--ink-200);
    white-space:nowrap;
}

.marquee-track > span::after{
    content:"\25C6";
    font-size:.4em;
    color:var(--brass);
}

@keyframes marquee{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
}

/* ----------------------------------------------------------- stats band -- */

.trust-strip{
    background:var(--midnight);
    color:rgba(255,255,255,.72);
    padding-block:var(--space-8);
}

.trust-list{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
}

.trust-list li{
    display:flex;
    flex-direction:column;
    gap:var(--space-2);
    padding-inline:var(--space-6);
    border-left:1px solid var(--line-invert);
}

.trust-list li:first-child{
    padding-left:0;
    border-left:0;
}

.trust-list strong{
    font-family:var(--font-display);
    font-weight:400;
    font-size:clamp(2rem, 3.6vw, 3.1rem);
    line-height:1;
    color:#fff;
    letter-spacing:-.03em;
}

.trust-list span{
    font-size:11px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:rgba(255,255,255,.42);
}

/* ---------------------------------------------------------- collections -- */

.categories{
    padding-block:var(--space-9);
}

.section-split{
    display:grid;
    grid-template-columns:1fr 280px;
    gap:var(--space-8);
    align-items:end;
    max-width:none;
}

.section-split .section-sub{
    margin-bottom:0;
}

.giftbox-stage{
    width:100%;
    height:176px;
}

.giftbox-hint{
    text-align:center;
    font-size:10px;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--ink-300);
    margin-top:var(--space-2);
}

.collection-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:var(--space-9) var(--space-8);
}

.collection-grid.cols-3{
    grid-template-columns:repeat(3, 1fr);
    gap:var(--space-8) var(--space-7);
}

.category-card{
    display:block;
    text-decoration:none;
    color:inherit;
}

/* Every second card drops, so the grid reads as a spread, not a table. */
.collection-grid:not(.cols-3) > .category-card:nth-child(even){
    margin-top:var(--space-8);
}

.collection-media{
    position:relative;
    overflow:hidden;
    background:var(--paper-2);
}

.collection-media img{
    width:100%;
    height:clamp(300px, 33vw, 480px);
    object-fit:cover;
    transition:transform 1.2s var(--ease-soft);
}

/* A warm wash over the photography that lifts on hover. */
.collection-media::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(150deg, rgba(200,111,78,.16) 0%, rgba(21,14,11,.28) 100%);
    transition:opacity .7s var(--ease);
    pointer-events:none;
}

.category-card:hover .collection-media::after{
    opacity:0;
}

.category-card:hover .collection-media img{
    transform:scale(1.05);
}

.collection-index{
    position:absolute;
    top:var(--space-5);
    left:var(--space-5);
    z-index:2;
    font-family:var(--font-display);
    font-size:2.6rem;
    line-height:1;
    letter-spacing:-.03em;
    color:transparent;
    -webkit-text-stroke:1px rgba(255,255,255,.85);
    transition:color .6s var(--ease);
}

.category-card:hover .collection-index{
    color:rgba(255,255,255,.22);
}

.collection-body{
    padding-top:var(--space-5);
    border-top:1px solid var(--line);
    margin-top:var(--space-5);
    display:grid;
    gap:var(--space-3);
}

.collection-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:var(--space-4);
}

.collection-head h3{
    transition:color .35s var(--ease);
}

.category-card:hover .collection-head h3{
    color:var(--clay-700);
}

.collection-meta{
    font-size:11px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--ink-300);
    white-space:nowrap;
}

.collection-body p{
    color:var(--ink-500);
    font-size:15.5px;
    line-height:1.7;
    max-width:46ch;
}

.category-card .card-link{
    justify-self:start;
    margin-top:var(--space-1);
}

.category-card:hover .card-link{
    background-size:100% 1px;
}

.category-card:hover .card-link::after{
    transform:translateX(5px);
}

/* ---------------------------------------------------------------- about -- */

.about{
    background:var(--paper-2);
}

.about-wrapper{
    display:grid;
    grid-template-columns:.95fr 1.05fr;
    align-items:center;
    gap:var(--space-10);
}

/* Two plates, offset, with a brass frame behind them. */
.image-box{
    position:relative;
    padding-right:var(--space-8);
    padding-bottom:var(--space-8);
}

.image-box::before{
    content:"";
    position:absolute;
    top:var(--space-7);
    right:0;
    bottom:0;
    left:var(--space-7);
    border:1px solid var(--brass-soft);
    pointer-events:none;
}

.image-box > picture img{
    position:relative;
    width:100%;
    height:clamp(340px, 40vw, 560px);
    object-fit:cover;
}

.image-inset{
    position:absolute;
    right:0;
    bottom:0;
    z-index:2;
    width:46%;
    border:7px solid var(--paper-2);
}

.image-inset img{
    width:100%;
    height:clamp(140px, 16vw, 220px);
    object-fit:cover;
}

.image-box .shape{
    display:none;
}

.about-content h2{
    margin-bottom:var(--space-5);
}

.about-content > p{
    color:var(--ink-500);
    max-width:52ch;
}

.about-features{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    margin-top:var(--space-7);
    border-top:1px solid var(--line);
}

.feature{
    display:flex;
    align-items:flex-start;
    gap:var(--space-3);
    padding:var(--space-4) var(--space-5) var(--space-4) 0;
    border-bottom:1px solid var(--line-soft);
    font-size:14.5px;
    font-weight:500;
    color:var(--ink);
}

.feature i{
    color:var(--brass);
    font-size:12px;
    margin-top:6px;
}

/* ------------------------------------------------------- feature blocks -- */

.why-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    border-top:1px solid var(--line);
}

.why-card{
    padding:var(--space-7) var(--space-6) var(--space-7) 0;
    border-right:1px solid var(--line-soft);
}

.why-card:not(:first-child){
    padding-left:var(--space-6);
}

.why-card:last-child{
    border-right:0;
    padding-right:0;
}

.why-card i{
    display:block;
    font-size:19px;
    color:var(--brass);
    margin-bottom:var(--space-5);
}

.why-card h3{
    font-size:1.06rem;
    margin-bottom:var(--space-3);
}

.why-card p{
    font-size:14.5px;
    line-height:1.75;
    color:var(--ink-500);
}

.process-section{
    background:var(--paper-2);
}

.process-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:var(--space-7);
}

/* The dot on the rule turns the row into a timeline. */
.process-step,
.use-case{
    position:relative;
    padding-top:var(--space-6);
    border-top:1px solid var(--line);
}

.process-step::before,
.use-case::before{
    content:"";
    position:absolute;
    top:-4px;
    left:0;
    width:7px;
    height:7px;
    background:var(--clay-600);
}

.use-case::before{
    background:var(--brass);
}

.process-number{
    display:block;
    font-family:var(--font-display);
    font-size:11.5px;
    letter-spacing:.2em;
    color:var(--clay-600);
    margin-bottom:var(--space-4);
}

.process-step h3,
.use-case h3{
    font-size:1.06rem;
    margin-bottom:var(--space-3);
}

.process-step p,
.use-case p{
    font-size:14.5px;
    line-height:1.75;
    color:var(--ink-500);
}

/* ---------------------------------------------------------------- prose -- */

.prose{
    max-width:var(--measure);
}

.prose h2{
    margin-bottom:var(--space-5);
}

.prose h2:not(:first-child){
    margin-top:var(--space-8);
}

.prose p{
    margin-bottom:var(--space-5);
    color:var(--ink-500);
}

.prose p:last-child{
    margin-bottom:0;
}

/* -------------------------------------------------- page heading, inner -- */

.breadcrumbs{
    padding-top:calc(var(--header-h) + var(--space-5));
}

.breadcrumbs ol{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    font-size:11.5px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--ink-300);
}

.breadcrumbs li + li::before{
    content:"/";
    margin-right:10px;
    color:var(--line);
}

.breadcrumbs a{
    text-decoration:none;
    transition:color .3s var(--ease);
}

.breadcrumbs a:hover{
    color:var(--clay-700);
}

.breadcrumbs [aria-current]{
    color:var(--ink);
}

.page-hero{
    position:relative;
    padding-block:var(--space-8) var(--space-9);
    background:
        radial-gradient(90% 80% at 92% 0%, var(--clay-050) 0%, transparent 58%),
        var(--paper);
}

main > .page-hero:first-child{
    padding-top:calc(var(--header-h) + var(--space-8));
}

.page-hero h1{
    max-width:17ch;
    margin-bottom:var(--space-5);
}

.page-hero-grid{
    display:grid;
    grid-template-columns:1.02fr .98fr;
    align-items:center;
    gap:var(--space-9);
}

.page-hero-image{
    position:relative;
}

.page-hero-image::before{
    content:"";
    position:absolute;
    inset:var(--space-6) calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-6);
    border:1px solid var(--brass-soft);
    pointer-events:none;
}

.page-hero-image img{
    position:relative;
    width:100%;
    height:clamp(320px, 44vw, 540px);
    object-fit:cover;
}

/* -------------------------------------------------- collection details -- */

.combo-block{
    margin-top:var(--space-8);
    padding-top:var(--space-7);
    border-top:1px solid var(--line);
}

.combo-block h2{
    margin-bottom:var(--space-4);
}

.combo-note{
    color:var(--ink-500);
    margin-bottom:var(--space-6);
    max-width:60ch;
}

.combo-list{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
    margin-bottom:var(--space-6);
    border-top:1px solid var(--line-soft);
}

.combo-list li{
    display:flex;
    align-items:baseline;
    gap:var(--space-3);
    padding:var(--space-4) var(--space-5) var(--space-4) 0;
    border-bottom:1px solid var(--line-soft);
    font-size:15px;
    color:var(--ink);
}

.combo-list li::before{
    content:"";
    width:5px;
    height:5px;
    flex:0 0 auto;
    background:var(--clay-500);
    transform:translateY(-3px);
}

.use-case-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:var(--space-7);
}

.steps{
    counter-reset:ordered;
    display:grid;
    gap:var(--space-4);
}

.steps li{
    counter-increment:ordered;
    position:relative;
    padding:0 0 var(--space-4) 48px;
    border-bottom:1px solid var(--line-soft);
    color:var(--ink-500);
    font-size:15px;
    line-height:1.7;
}

.steps li::before{
    content:counter(ordered, decimal-leading-zero);
    position:absolute;
    left:0;
    top:1px;
    font-family:var(--font-display);
    font-size:11.5px;
    letter-spacing:.16em;
    color:var(--clay-600);
}

/* ------------------------------------------------------------------ faq -- */

.faq-section .container > *{
    max-width:940px;
}

.faq-item{
    border-bottom:1px solid var(--line-soft);
}

.faq-item:first-of-type{
    border-top:1px solid var(--line);
}

.faq-item summary{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:var(--space-5);
    padding:var(--space-6) 0;
    cursor:pointer;
    list-style:none;
    font-family:var(--font-display);
    font-size:1.16rem;
    line-height:1.35;
    color:var(--ink);
    transition:color .3s var(--ease);
}

.faq-item summary::-webkit-details-marker{
    display:none;
}

.faq-item summary::after{
    content:"+";
    font-family:var(--font-body);
    font-size:20px;
    font-weight:300;
    color:var(--clay-600);
    line-height:1;
    flex:0 0 auto;
    transition:transform .4s var(--ease);
}

.faq-item[open] summary::after{
    transform:rotate(45deg);
}

.faq-item summary:hover{
    color:var(--clay-700);
}

.faq-answer{
    padding-bottom:var(--space-6);
    max-width:64ch;
}

.faq-answer p{
    color:var(--ink-500);
    font-size:15.5px;
}

/* ------------------------------------------------------------- cta band -- */

.cta-band{
    position:relative;
    background:var(--midnight);
    color:#fff;
    padding-block:var(--space-10);
    overflow:hidden;
}

.cta-band::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(70% 120% at 82% 100%, rgba(148,73,47,.42) 0%, transparent 60%);
    pointer-events:none;
}

.cta-band h2{
    color:#fff;
    max-width:16ch;
    margin-bottom:var(--space-5);
}

.cta-band h2::after{
    content:"";
    display:block;
    width:80px;
    height:1px;
    background:var(--brass);
    margin-top:var(--space-6);
}

.cta-band p{
    color:rgba(255,255,255,.62);
    max-width:50ch;
    font-size:1.04rem;
}

.cta-band .btn{
    margin-top:var(--space-7);
    background:#fff;
    border-color:#fff;
    color:var(--ink);
}

.cta-band .btn::before{
    background:var(--clay-600);
}

.cta-band .btn:hover{
    color:#fff;
    border-color:var(--clay-600);
}

/* --------------------------------------------------------- contact page -- */

.contact-section{
    padding-block:0 var(--space-9);
}

.contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-9);
    align-items:start;
}

.contact-details h2,
.form-panel h2{
    font-size:clamp(1.5rem, 2.4vw, 2rem);
    margin-bottom:var(--space-6);
}

.contact-cards{
    display:grid;
    border-top:1px solid var(--line);
    margin-bottom:var(--space-7);
}

.contact-card{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:var(--space-5);
    padding:var(--space-5) 0;
    border-bottom:1px solid var(--line-soft);
    transition:padding-left .4s var(--ease);
}

.contact-card:last-child{
    border-bottom:0;
}

.contact-card:hover{
    padding-left:var(--space-3);
}

.contact-card i{
    font-size:15px;
    color:var(--brass);
    margin-top:6px;
    width:18px;
    text-align:center;
}

.contact-card h3{
    font-family:var(--font-body);
    font-size:11px;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--ink-300);
    margin-bottom:var(--space-2);
}

.contact-card p{
    font-size:16px;
    color:var(--ink);
    line-height:1.6;
}

.contact-note{
    border-top:1px solid var(--line);
    padding-top:var(--space-6);
}

.contact-note h3{
    font-size:1.06rem;
    margin-bottom:var(--space-4);
}

.contact-note ul{
    display:grid;
    gap:var(--space-2);
    margin-bottom:var(--space-5);
}

.contact-note li{
    position:relative;
    padding-left:var(--space-5);
    color:var(--ink-500);
    font-size:15px;
}

.contact-note li::before{
    content:"";
    position:absolute;
    left:0;
    top:13px;
    width:11px;
    height:1px;
    background:var(--clay-500);
}

.contact-note p{
    font-size:15px;
    color:var(--ink-500);
}

.form-panel{
    position:relative;
    background:var(--paper-2);
    padding:var(--space-8);
    scroll-margin-top:calc(var(--header-h) + var(--space-5));
}

.form-panel::before{
    content:"";
    position:absolute;
    top:calc(-1 * var(--space-4));
    left:calc(-1 * var(--space-4));
    width:120px;
    height:120px;
    border-top:1px solid var(--brass-soft);
    border-left:1px solid var(--brass-soft);
    pointer-events:none;
}

.form-panel > p{
    color:var(--ink-500);
    font-size:15px;
    margin-bottom:var(--space-6);
}

/* ---------------------------------------------------------------- forms -- */

.enquiry-form{
    display:grid;
    gap:var(--space-4);
}

.enquiry-form input,
.enquiry-form textarea{
    width:100%;
    padding:15px 0;
    border-bottom:1px solid var(--line);
    border-radius:0;
    font-size:15.5px;
    color:var(--ink);
    transition:border-color .3s var(--ease);
}

.enquiry-form textarea{
    resize:vertical;
    min-height:96px;
}

.enquiry-form input::placeholder,
.enquiry-form textarea::placeholder{
    color:var(--ink-300);
}

.enquiry-form input:focus,
.enquiry-form textarea:focus{
    outline:none;
    border-bottom-color:var(--clay-600);
}

.enquiry-form input.invalid,
.enquiry-form textarea.invalid{
    border-bottom-color:#B3261E;
}

.form-submit-btn{
    border:1px solid var(--clay-700);
}

.form-submit-btn:disabled{
    cursor:not-allowed;
    opacity:.55;
}

.form-status{
    display:none;
    font-size:14px;
    line-height:1.6;
    padding-top:var(--space-2);
}

/* ---------------------------------------------------------------- modal -- */

.form-modal{
    position:fixed;
    inset:0;
    z-index:1200;
    display:none;
    background:rgba(21,14,11,.6);
    backdrop-filter:blur(4px);
    padding:var(--space-5);
    overflow-y:auto;
}

.form-modal.active{
    display:grid;
    place-items:center;
}

.form-modal-content{
    position:relative;
    width:min(100%, 560px);
    background:var(--paper);
    padding:var(--space-8);
    max-height:calc(100vh - 2 * var(--space-5));
    overflow-y:auto;
    animation:modal-in .5s var(--ease);
}

@keyframes modal-in{
    from{ opacity:0; transform:translateY(16px); }
    to{ opacity:1; transform:none; }
}

.form-modal-content h2{
    font-size:1.95rem;
    margin-bottom:var(--space-3);
}

.form-modal-content > p{
    color:var(--ink-500);
    font-size:15px;
    margin-bottom:var(--space-6);
}

.form-close{
    position:absolute;
    top:var(--space-5);
    right:var(--space-5);
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    font-size:24px;
    line-height:1;
    color:var(--ink-300);
    transition:color .3s var(--ease);
}

.form-close:hover{
    color:var(--ink);
}

/* --------------------------------------------------------------- footer -- */

.footer{
    position:relative;
    background:var(--midnight);
    color:rgba(255,255,255,.68);
    padding-block:var(--space-9) var(--space-6);
    overflow:hidden;
}

.footer-top{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1.1fr;
    gap:var(--space-8);
}

.footer-logo{
    width:150px;
    margin-bottom:var(--space-5);
    filter:brightness(0) invert(1);
    opacity:.9;
}

.footer-box p{
    font-size:14.5px;
    line-height:1.8;
    margin-bottom:var(--space-3);
}

.footer-box h2{
    font-family:var(--font-body);
    font-size:11px;
    font-weight:600;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:rgba(255,255,255,.42);
    margin-bottom:var(--space-5);
}

.footer-box ul{
    display:grid;
    gap:var(--space-3);
}

.footer-box a{
    font-size:14.5px;
    text-decoration:none;
    transition:color .3s var(--ease), padding-left .3s var(--ease);
}

.footer-box li a:hover{
    color:#fff;
    padding-left:6px;
}

.footer-box i{
    color:var(--brass);
    margin-right:10px;
    font-size:12px;
}

.footer-enquiry-btn{
    display:inline-block;
    margin-block:var(--space-4);
    font-size:11.5px;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:#fff;
    text-decoration:none;
    border-bottom:1px solid var(--brass);
    padding-bottom:5px;
}

.footer-enquiry-btn:hover{
    border-bottom-color:#fff;
}

.social-icons{
    display:flex;
    gap:var(--space-5);
    margin-top:var(--space-6);
}

.social-icons a{
    font-size:15px;
    color:rgba(255,255,255,.5);
    transition:color .3s var(--ease), transform .3s var(--ease);
}

.social-icons a:hover{
    color:#fff;
    transform:translateY(-2px);
}

.footer hr{
    border:0;
    border-top:1px solid var(--line-invert);
    margin-block:var(--space-8) var(--space-5);
}

.footer-bottom{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:var(--space-4);
    font-size:13px;
    color:rgba(255,255,255,.44);
}

/* ----------------------------------------------------- floating buttons -- */

.to-top,
.whatsapp-float{
    position:fixed;
    right:var(--space-5);
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    text-decoration:none;
    z-index:900;
    transition:transform .35s var(--ease), opacity .35s var(--ease), background .3s var(--ease);
}

.whatsapp-float{
    bottom:calc(var(--space-5) + 56px);
    background:#25D366;
    color:#fff;
    font-size:20px;
}

.whatsapp-float:hover{
    transform:translateY(-3px);
    color:#fff;
}

.to-top{
    bottom:var(--space-5);
    background:var(--ink);
    color:#fff;
    font-size:13px;
    opacity:0;
    pointer-events:none;
}

.to-top.show{
    opacity:1;
    pointer-events:auto;
}

.to-top:hover{
    transform:translateY(-3px);
    background:var(--clay-700);
}

/* --------------------------------------------------------------- motion -- */

.reveal{
    opacity:0;
    transform:translateY(22px);
    transition:opacity .9s var(--ease), transform .9s var(--ease);
}

.reveal.visible{
    opacity:1;
    transform:none;
}

.stagger > *{
    opacity:0;
    transform:translateY(16px);
    transition:opacity .75s var(--ease), transform .75s var(--ease);
}

.stagger.visible > *{
    opacity:1;
    transform:none;
}

.stagger.visible > *:nth-child(2){ transition-delay:.08s; }
.stagger.visible > *:nth-child(3){ transition-delay:.16s; }
.stagger.visible > *:nth-child(4){ transition-delay:.24s; }
.stagger.visible > *:nth-child(5){ transition-delay:.32s; }
.stagger.visible > *:nth-child(6){ transition-delay:.4s; }

@media (prefers-reduced-motion: reduce){
    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
    }

    .reveal,
    .stagger > *{
        opacity:1;
        transform:none;
    }
}

/* ----------------------------------------------------------- responsive -- */

@media(max-width:1200px){
    .why-grid,
    .process-grid,
    .use-case-grid{
        grid-template-columns:repeat(2, 1fr);
    }

    .why-card:nth-child(2){
        border-right:0;
        padding-right:0;
    }

    .why-card:nth-child(3){
        padding-left:0;
        border-top:1px solid var(--line-soft);
    }

    .why-card:nth-child(4){
        border-top:1px solid var(--line-soft);
    }

    .collection-grid.cols-3{
        grid-template-columns:repeat(2, 1fr);
    }

    .footer-top{
        grid-template-columns:repeat(2, 1fr);
        gap:var(--space-7);
    }
}

@media(max-width:991px){
    :root{
        --header-h:74px;
        --space-9:76px;
        --space-10:92px;
    }

    /* .container is position:relative, which was acting as the containing
       block for the drop-down: it came out inset by the page gutter with the
       hero showing through either side. Against the fixed header it spans. */
    .header .container{
        position:static;
    }

    /* Not clip-path: a stalled clip transition leaves the panel sliced in
       half, and a clipped menu keeps its links in the tab order while it
       looks closed. visibility does both jobs honestly. */
    .navbar{
        position:absolute;
        top:var(--header-h);
        left:0;
        width:100%;
        background:var(--paper);
        border-bottom:1px solid var(--line-soft);
        opacity:0;
        visibility:hidden;
        transform:translateY(-10px);
        transition:opacity .32s var(--ease), transform .32s var(--ease), visibility .32s;
    }

    .navbar.active{
        opacity:1;
        visibility:visible;
        transform:none;
    }

    .navbar ul{
        flex-direction:column;
        align-items:stretch;
        gap:0;
        width:min(100% - 2 * var(--space-5), var(--shell));
        margin-inline:auto;
        padding:var(--space-2) 0 var(--space-4);
    }

    .navbar li{
        width:100%;
        border-bottom:1px solid var(--line-soft);
    }

    .navbar a{
        display:block;
        padding:var(--space-4) 0;
        font-size:14px;
    }

    .navbar a::after{
        display:none;
    }

    .menu-btn{
        display:block;
    }

    .header-btn{
        display:none;
    }

    .hero-intro,
    .about-wrapper,
    .page-hero-grid,
    .contact-grid,
    .section-split{
        grid-template-columns:1fr;
        gap:var(--space-8);
    }

    .hero-plate::before,
    .page-hero-image::before,
    .image-box::before,
    .form-panel::before{
        display:none;
    }

    .image-box{
        padding-right:0;
        padding-bottom:0;
    }

    .image-inset{
        width:38%;
        right:var(--space-4);
        bottom:calc(-1 * var(--space-4));
    }

    .page-hero-image{
        order:-1;
    }

    .giftbox-wrap{
        display:none;
    }

    .trust-list{
        grid-template-columns:repeat(2, 1fr);
        gap:var(--space-6) 0;
    }

    .trust-list li:nth-child(odd){
        padding-left:0;
        border-left:0;
    }

    .collection-grid,
    .collection-grid.cols-3{
        grid-template-columns:1fr;
        gap:var(--space-8);
    }

    .collection-grid:not(.cols-3) > .category-card:nth-child(even){
        margin-top:0;
    }

    .form-panel{
        padding:var(--space-6);
    }

    /* Touch targets. In the footer the links were 18px tall and the social
       icons about 20px square, which is too small to hit on a phone. */
    .footer-box ul{
        gap:0;
    }

    .footer-box li a{
        display:block;
        padding-block:12px;
    }

    .footer-enquiry-btn{
        padding-block:12px 10px;
    }

    .social-icons{
        gap:var(--space-3);
    }

    .social-icons a{
        width:44px;
        height:44px;
        display:grid;
        place-items:center;
        border:1px solid var(--line-invert);
    }

    .social-icons a:hover{
        border-color:rgba(255,255,255,.5);
    }
}

@media(max-width:768px){
    :root{
        --space-8:44px;
        --space-9:62px;
        --space-10:72px;
    }

    .hero{
        padding-top:calc(var(--header-h) + var(--space-7));
    }

    .hero-meta{
        grid-template-columns:repeat(2, 1fr);
        gap:var(--space-5);
    }

    .about-features,
    .combo-list{
        grid-template-columns:1fr;
    }

    .why-grid,
    .process-grid,
    .use-case-grid{
        grid-template-columns:1fr;
        gap:0;
    }

    .why-card{
        border-right:0;
        padding:var(--space-6) 0;
        border-top:1px solid var(--line-soft);
    }

    .why-card:first-child{
        border-top:0;
    }

    .why-card:nth-child(2),
    .why-card:nth-child(3),
    .why-card:nth-child(4){
        padding-left:0;
        padding-right:0;
    }

    .process-step,
    .use-case{
        margin-top:var(--space-6);
    }

    .footer-top{
        grid-template-columns:1fr;
        gap:var(--space-7);
    }

    .form-modal-content{
        padding:var(--space-6);
    }
}

@media(max-width:576px){
    body{
        font-size:16px;
    }

    .btn{
        padding:16px 26px;
        font-size:10.5px;
    }

    .hero-actions .btn{
        width:100%;
        justify-content:center;
    }

    .plate-controls{
        padding-left:0;
        flex-wrap:wrap;
        gap:var(--space-4);
    }

    .plate-controls .swiper-pagination{
        min-width:0;
        flex-wrap:wrap;
    }

    .swiper-pagination-bullet{
        width:16px;
    }

    .trust-list{
        grid-template-columns:1fr;
    }

    .trust-list li{
        padding:var(--space-4) 0 0;
        border-left:0;
        border-top:1px solid var(--line-invert);
    }

    .trust-list li:first-child{
        border-top:0;
        padding-top:0;
    }

    .collection-head{
        flex-direction:column;
        gap:var(--space-2);
    }

    .collection-index{
        font-size:2rem;
    }

    .image-inset{
        display:none;
    }

    .form-panel{
        padding:var(--space-5);
    }
}