/* DOTTO homepage — "Stories" (light, photo-led). Photos in assets/photos are AI-generated illustrations. */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;-webkit-font-smoothing:antialiased;overflow-x:hidden;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3{text-wrap:balance}
[data-lucide]{width:1em;height:1em;stroke-width:1.75}
.wrap{width:calc(100% - clamp(48px,8vw,160px));margin-inline:auto}
.num{font-variant-numeric:tabular-nums}
/* film grain over the whole page — the "texture" layer */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.rv{opacity:0;transform:translateY(28px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*90ms)}
.rv.in{opacity:1;transform:none}
.mask{clip-path:inset(12% 0 0 0 round 20px);transition:clip-path 1.4s cubic-bezier(.16,1,.3,1)}
.mask.in{clip-path:inset(0 0 0 0 round 20px)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}.mask{clip-path:none}}
.logo-chip{display:inline-flex;align-items:center;background:#fff;border-radius:12px;padding:5px 10px;box-shadow:0 1px 0 rgba(0,0,0,.04),0 0 0 1px rgba(0,0,0,.06)}
.logo-chip img{height:30px;width:auto;mix-blend-mode:multiply;filter:brightness(1.05) contrast(1.05)}

/* ==========================================================
   A — STORIES · warm paper, Instrument Serif + Figtree,
   terracotta (warmed DOTTO red) + deep DOTTO blue
   ========================================================== */
.A{--paper:#faf7f2;--paper-2:#f3eee6;--ink:#1f1c19;--ink-2:#4a453f;--mut:#6e675e;--hair:rgba(31,28,25,.12);--terra:#d42b1f;--terra-2:#a8211a;--blue:#046cb2;
  background:var(--paper);color:var(--ink);font-family:Figtree,system-ui,sans-serif;line-height:1.55}
.A .serif{font-family:"Instrument Serif",serif;font-weight:400;letter-spacing:-.01em}
.A .eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
/* one heading scale for every section title across the site */
.A .sec-h,.A .h2{font-size:clamp(2.6rem,4.6vw,4.2rem);line-height:1.02;margin-top:1rem;max-width:24ch}
.A .sec-h em,.A .h2 em{font-style:italic;color:var(--terra)}
.A .eyebrow::before{content:"";width:18px;height:1px;background:currentColor}
.A .nav{position:fixed;inset:0 0 auto;z-index:50;transition:background .4s,box-shadow .4s,color .4s;color:#fff}
.A .nav .wrap{position:relative;display:flex;align-items:center;justify-content:space-between;height:78px;gap:1.5rem}
.A .nav .links{display:flex;gap:2rem;font-size:.92rem;font-weight:500;transition:opacity .3s}
.A .nav .links a{opacity:.85;transition:opacity .2s}
.A .nav .links a:hover{opacity:1}
.A .nav .mini{position:absolute;left:50%;top:50%;translate:-50% -50%;display:flex;align-items:center;gap:.9rem;padding:.45rem .5rem .45rem 1.2rem;border-radius:999px;background:#fff;color:var(--ink);font-size:.86rem;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08),0 6px 20px rgba(0,0,0,.08);opacity:0;scale:.9;pointer-events:none;transition:opacity .35s,scale .35s}
.A .nav .mini span+span{padding-left:.9rem;border-left:1px solid var(--hair);color:var(--mut);font-weight:500}
.A .nav .mini i.go{width:32px;height:32px;border-radius:50%;background:var(--terra);color:#fff;display:grid;place-items:center;font-size:.9rem}
.A .nav.solid{background:rgba(250,247,242,.92);backdrop-filter:blur(18px) saturate(1.4);color:var(--ink);box-shadow:0 1px 0 var(--hair)}
.A .nav.solid .mini{opacity:1;scale:1;pointer-events:auto}
.A .nav.solid .links{opacity:0;pointer-events:none}
.A .nav .right{display:flex;align-items:center;gap:.6rem}
.A .btn{display:inline-flex;align-items:center;gap:.55rem;padding:.8rem 1.3rem;border-radius:999px;font-weight:600;font-size:.92rem;border:0;cursor:pointer;transition:background .25s,color .25s,box-shadow .25s,transform .25s,border-color .25s}
.A .btn-terra{background:var(--terra);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 20px -10px var(--terra)}
.A .btn-terra:hover{background:var(--terra-2)}
.A .btn-glass{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(10px)}
.A .nav.solid .btn-glass{background:transparent;color:var(--ink);border-color:var(--hair)}
.A .btn-ink{background:var(--ink);color:#fff}
.A .btn-ink:hover{background:#000}
.A .hero{position:relative;height:min(92vh,860px);min-height:620px;color:#fff;overflow:hidden;border-radius:0 0 28px 28px}
.A .hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 40%;animation:kb 24s ease-out both}
@keyframes kb{from{transform:scale(1.14)}to{transform:scale(1)}}
.A .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,14,10,.72) 0%,rgba(18,14,10,.35) 45%,rgba(18,14,10,0) 70%),linear-gradient(0deg,rgba(18,14,10,.55),transparent 40%)}
.A .hero .wrap{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:9.5rem}
.A .hero h1{font-size:clamp(3.2rem,7.4vw,6.8rem);line-height:.95;max-width:11ch}
.A .hero h1 em{font-style:italic;color:#ffd9c9}
.A .hero p{max-width:30rem;margin-top:1.4rem;font-size:1.12rem;color:rgba(255,255,255,.85)}
/* shorter photo hero (inner pages) */
.A .hero.short{display:flex;flex-direction:column;justify-content:flex-end;height:auto;min-height:max(560px,min(80vh,760px));padding-top:120px}
.A .hero.short img{object-position:50% 40%;animation-name:kbShort}
@keyframes kbShort{from{transform:scale(1.06)}to{transform:scale(1)}}
.A .hero.short .wrap{height:auto;padding-bottom:8rem}
.A .hero.short h1{max-width:16ch;font-size:clamp(2.8rem,5.8vw,5.6rem)}
.A .hero .cap{position:absolute;right:0;bottom:9.8rem;display:flex;align-items:center;gap:.7rem;padding:.55rem .9rem .55rem .55rem;border-radius:14px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(14px);font-size:.8rem}
.A .hero .cap b{display:block;font-size:.86rem}
.A .hero .cap i.ic{width:34px;height:34px;border-radius:10px;background:#fff;color:var(--terra);display:grid;place-items:center}
.A .search{position:relative;z-index:5;margin:-3.3rem auto 0;width:min(980px,100% - 32px);display:grid;grid-template-columns:1.3fr 1fr 1fr auto;align-items:center;background:#fff;border-radius:999px;box-shadow:0 1px 2px rgba(0,0,0,.06),0 18px 48px -18px rgba(31,28,25,.35);padding:.45rem}
.A .seg{position:relative;padding:.75rem 1.6rem;border-radius:999px;cursor:text;transition:background .2s}
.A .seg:hover{background:var(--paper-2)}
.A .seg + .seg::before{content:"";position:absolute;left:0;top:25%;bottom:25%;width:1px;background:var(--hair);transition:opacity .2s}
.A .seg:hover::before,.A .seg:hover + .seg::before{opacity:0}
.A .seg label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.02em}
.A .seg input,.A .seg select{display:block;width:100%;border:0;outline:0;background:none;padding:.1rem 0 0;font-size:.92rem;color:var(--ink-2)}
.A .seg select{appearance:none;cursor:pointer}
.A .search .go{height:56px;padding:0 1.5rem 0 1.2rem;border-radius:999px;border:0;background:var(--terra);color:#fff;font-weight:700;display:flex;align-items:center;gap:.5rem;cursor:pointer;transition:background .2s,padding .3s}
.A .search .go:hover{background:var(--terra-2);padding-right:1.8rem}
.A .rail{display:flex;gap:2.4rem;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--hair);margin-top:4.5rem}
.A .rail::-webkit-scrollbar{display:none}
.A .rail button{flex:none;display:flex;flex-direction:column;align-items:center;gap:.45rem;padding:0 0 .9rem;background:none;border:0;border-bottom:2px solid transparent;color:var(--mut);font-size:.8rem;font-weight:600;cursor:pointer;transition:color .2s,border-color .2s}
.A .rail button i{font-size:1.5rem}
.A .rail button:hover{color:var(--ink);border-color:var(--hair)}
.A .rail button[aria-pressed=true]{color:var(--ink);border-color:var(--ink)}
.A .listings{display:grid;grid-template-columns:repeat(4,1fr);gap:2.2rem 1.5rem;margin-top:2.2rem}
.A .card{display:block}
.A .card.out{display:none}
.A .card .ph{position:relative;aspect-ratio:1/1;border-radius:18px;overflow:hidden;background:var(--paper-2)}
.A .card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.A .card:hover .ph img{transform:scale(1.06)}
.A .card .tag{position:absolute;left:.8rem;top:.8rem;padding:.35rem .7rem;border-radius:999px;background:rgba(255,255,255,.94);font-size:.74rem;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.A .card .save{position:absolute;right:.7rem;top:.7rem;width:34px;height:34px;border-radius:50%;border:0;background:transparent;color:#fff;cursor:pointer;display:grid;place-items:center;font-size:1.3rem;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));transition:transform .2s}
.A .card .save:active{transform:scale(.85)}
.A .card .save.on svg{fill:var(--terra);color:var(--terra)}
.A .card .dots{position:absolute;bottom:.7rem;left:50%;translate:-50% 0;display:flex;gap:4px}
.A .card .dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.6)}
.A .card .dots i:first-child{background:#fff}
.A .card .meta{margin-top:.8rem;display:grid;gap:.1rem;font-size:.92rem}
.A .card .meta div{display:flex;justify-content:space-between;gap:.5rem}
.A .card b{font-weight:600}
.A .card .rate{display:inline-flex;align-items:center;gap:.35rem;font-weight:500;white-space:nowrap}
.A .card .rate i{width:6px;height:6px;border-radius:50%;background:#1f9d55;box-shadow:0 0 0 3px rgba(31,157,85,.15)}
.A .card span.m{color:var(--mut)}
.A .card .pay{margin-top:.2rem}
.A .card .pay b{font-weight:700}
.A section.s{padding:7rem 0}
.A .statement{font-size:clamp(2.2rem,4.6vw,3.9rem);line-height:1.08;max-width:36ch}
.A .statement em{font-style:italic;color:var(--terra)}
.A .statement .dim{color:#7b746b}
.A .stats{display:grid;grid-template-columns:repeat(5,1fr);margin-top:4rem;border-top:1px solid var(--hair)}
.A .stats div{padding:1.6rem 1.4rem 0 0}
.A .stats div + div{padding-left:1.4rem;border-left:1px solid var(--hair)}
@media (min-width:1021px) and (max-width:1300px){.A .stats b{font-size:clamp(2.4rem,4vw,3.4rem)}}
.A .stats b{display:block;font-family:"Instrument Serif";font-weight:400;font-size:clamp(2.8rem,5vw,4.4rem);line-height:1;letter-spacing:-.02em}
.A .stats span{display:block;margin-top:.6rem;color:var(--mut);font-size:.9rem}
.A .trio{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.4rem;margin-top:2.6rem;padding:1rem 1.4rem;border-radius:18px;background:#fff;border:1px solid var(--hair);font-weight:600;font-size:.92rem}
.A .trio .lbl{font-weight:500;color:var(--mut);margin-right:auto}
.A .trio .lbl em{font-family:"Instrument Serif";font-size:1.2rem;color:var(--terra-2)}
.A .trio span:not(.lbl){display:inline-flex;align-items:center;gap:.45rem}
.A .trio span i,.A .trio svg{color:var(--terra)}
.A .trio a{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1rem;border-radius:999px;background:var(--ink);color:#fff;font-size:.85rem}
.A .lchips{list-style:none;padding:0;margin:.9rem 0 0;display:flex;flex-wrap:wrap;gap:.35rem}
.A .lchips li{padding:.3rem .7rem;border-radius:999px;border:1px solid var(--hair);font-size:.76rem;font-weight:600}
.A .story{display:grid;grid-template-columns:1.05fr .95fr;gap:4rem;align-items:start}
.A .story .frame{position:sticky;top:110px;height:calc(100vh - 150px);max-height:720px;border-radius:24px;overflow:hidden;background:var(--paper-2)}
.A .story .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity 1s ease,transform 1.8s cubic-bezier(.16,1,.3,1)}
.A .story .frame img.on{opacity:1;transform:none}
.A .story .clock{position:absolute;left:1.2rem;bottom:1.2rem;z-index:2;display:flex;align-items:center;gap:.6rem;padding:.6rem .9rem;border-radius:14px;background:rgba(255,255,255,.92);font-weight:700;font-size:.9rem;backdrop-filter:blur(10px)}
.A .story .clock i{color:var(--terra)}
.A .story .prog{position:absolute;left:1.2rem;right:1.2rem;top:1.2rem;z-index:2;display:flex;gap:6px}
.A .story .prog i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.4);transition:background .4s}
.A .story .prog i.on{background:#fff}
.A .step{min-height:78vh;display:flex;flex-direction:column;justify-content:center;opacity:.28;transition:opacity .6s}
.A .step.on{opacity:1}
.A .step small{font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.74rem;color:var(--terra-2)}
.A .step h3{font-size:clamp(2rem,3.4vw,3rem);line-height:1.05;margin:.8rem 0 1rem}
.A .step p{color:var(--ink-2);font-size:1.05rem;max-width:30rem}
.A .step .pill{margin-top:1.4rem;display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .9rem;border-radius:999px;border:1px solid var(--hair);font-size:.84rem;font-weight:600;width:fit-content;background:#fff}
.A .emp{display:grid;grid-template-columns:.95fr 1.05fr;gap:4.5rem;align-items:start}
.A .emp .photo{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/5}
.A .emp .photo img{width:100%;height:100%;object-fit:cover;object-position:35% 50%}
.A .emp .photo .note{position:absolute;left:1.2rem;right:1.2rem;bottom:1.2rem;padding:1rem 1.1rem;border-radius:16px;background:rgba(250,247,242,.94);backdrop-filter:blur(12px);display:grid;grid-template-columns:auto 1fr;gap:.2rem .9rem;align-items:center;font-size:.86rem}
.A .emp .photo .note b{font-size:.95rem}
.A .emp .photo .note > i{grid-row:span 2;width:40px;height:40px;border-radius:12px;background:var(--ink);color:#fff;display:grid;place-items:center}
.A .acc{margin-top:2.2rem;border-top:1px solid var(--hair)}
.A .acc details{border-bottom:1px solid var(--hair)}
.A .acc summary{list-style:none;display:grid;grid-template-columns:44px 1fr 28px;align-items:center;gap:.6rem;padding:1.35rem 0;cursor:pointer}
.A .acc summary::-webkit-details-marker{display:none}
.A .acc summary .n{font-family:"Instrument Serif";font-size:1.1rem;color:var(--mut)}
.A .acc summary h3{font-family:"Instrument Serif";font-weight:400;font-size:1.9rem;line-height:1;transition:color .2s}
.A .acc summary:hover h3{color:var(--terra)}
.A .acc summary .pl{width:28px;height:28px;border-radius:50%;border:1px solid var(--hair);position:relative;transition:background .3s}
.A .acc summary .pl::before,.A .acc summary .pl::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:var(--ink);translate:-50% -50%}
.A .acc summary .pl::after{rotate:90deg;transition:rotate .35s}
.A .acc details[open] .pl{background:var(--ink)}
.A .acc details[open] .pl::before,.A .acc details[open] .pl::after{background:#fff}
.A .acc details[open] .pl::after{rotate:0deg}
.A .acc .body{padding:0 0 1.5rem 50px;color:var(--ink-2);display:grid;gap:.9rem;animation:accIn .5s cubic-bezier(.16,1,.3,1)}
@keyframes accIn{from{opacity:0;transform:translateY(-6px)}}
.A .acc .body ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.45rem}
.A .acc .body li{padding:.35rem .75rem;border-radius:999px;background:#fff;border:1px solid var(--hair);font-size:.82rem;font-weight:600}
.A .tile{position:relative;border-radius:20px;overflow:hidden;color:#fff;isolation:isolate}
.A .tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.A .tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(15,12,9,.75),rgba(15,12,9,0) 55%)}
.A .tile:hover img{transform:scale(1.07)}
.A .tile > div{position:absolute;left:1.2rem;right:1.2rem;bottom:1.1rem;display:flex;justify-content:space-between;align-items:end;gap:1rem}
.A .tile h3{font-family:"Instrument Serif";font-weight:400;font-size:1.9rem;line-height:1}
.A .tile p{font-size:.82rem;opacity:.85;margin-top:.3rem}
.A .tile .arr{flex:none;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(8px);display:grid;place-items:center;transition:background .3s,color .3s,rotate .3s}
.A .tile:hover .arr{background:#fff;color:var(--ink);rotate:-45deg}
.A .band{position:relative;border-radius:28px;overflow:hidden;color:#fff;min-height:620px;display:flex;align-items:flex-end}
.A .band > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.A .band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,12,9,.8),rgba(15,12,9,.35) 60%,rgba(15,12,9,.15))}
.A .band .in{position:relative;z-index:1;padding:clamp(2rem,5vw,4rem);display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:end;width:100%}
.A .band h2{font-size:clamp(2.6rem,5vw,4.6rem);line-height:1}
.A .band h2 em{font-style:italic;color:#ffd9c9}
.A .band .glass{border-radius:20px;padding:1.4rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(18px) saturate(1.3)}
.A .band ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.2rem 1.4rem;counter-reset:c}
.A .band li{counter-increment:c;display:grid;grid-template-columns:auto 1fr;column-gap:.7rem;padding:.7rem 0;border-bottom:1px solid rgba(255,255,255,.15);font-size:.92rem;font-weight:600;line-height:1.3}
.A .band li::before{content:counter(c,decimal-leading-zero);grid-row:span 2;font-family:"Instrument Serif";font-size:1.05rem;opacity:.7}
.A .band li small{opacity:.65;font-size:.78rem;font-weight:400;margin-top:.15rem}
.A .leaders{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:3rem}
.A .leader{display:grid;grid-template-columns:180px 1fr;gap:1.6rem;padding:1.4rem;border-radius:22px;background:#fff;border:1px solid var(--hair)}
.A .leader img{width:100%;aspect-ratio:1;object-fit:cover;object-position:top;border-radius:14px}
.A .leader h3{font-family:"Instrument Serif";font-weight:400;font-size:2rem;line-height:1}
.A .leader .r{color:var(--terra);font-weight:600;font-size:.88rem;margin:.4rem 0 .9rem}
.A .leader p{color:var(--ink-2);font-size:.92rem}
.A .seeker{display:grid;grid-template-columns:1fr 1fr;border-radius:28px;overflow:hidden;background:#efe6da}
.A .seeker .pic{position:relative;min-height:560px}
.A .seeker .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.A .seeker .body{padding:clamp(2rem,5vw,4.5rem);display:flex;flex-direction:column;justify-content:center;gap:1.2rem}
.A .seeker h2{font-size:clamp(2.6rem,4.6vw,4.2rem);line-height:1}
.A .seeker h2 em{font-style:italic;color:var(--terra)}
.A .seeker p{color:var(--ink-2);max-width:28rem}
.A .seeker form{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.6rem}
.A .seeker input,.A .seeker select{width:100%;padding:.95rem 1.1rem;border-radius:14px;border:1px solid rgba(31,28,25,.15);background:rgba(255,255,255,.7);outline:0;transition:border-color .2s,background .2s}
.A .seeker input:focus,.A .seeker select:focus{border-color:var(--ink);background:#fff}
.A .seeker form .btn{grid-column:1/-1;justify-content:center;padding:1rem}
.A .seeker .fine{font-size:.78rem;color:var(--mut)}
@media (max-width:1020px){
  .A .nav .links,.A .nav .mini{display:none}
  .A .search{grid-template-columns:1fr 1fr;border-radius:24px}.A .search .go{grid-column:1/-1;justify-content:center}
  .A .seg + .seg::before{display:none}
  .A .listings{grid-template-columns:repeat(2,1fr)}
  .A .story{grid-template-columns:1fr}.A .story .frame{position:relative;top:0;height:60vh}.A .step{min-height:auto;padding:2.2rem 0;opacity:1}
  .A .emp,.A .band .in,.A .seeker,.A .leaders{grid-template-columns:1fr}
  .A .stats{grid-template-columns:repeat(2,1fr)}.A .stats div:nth-child(odd){border-left:0;padding-left:0}
  .A .hero .cap{display:none}
}
@media (max-width:560px){
  .A .search{grid-template-columns:1fr}.A .listings{grid-template-columns:1fr}.A .leader{grid-template-columns:1fr}
  .A .band ol{grid-template-columns:1fr}.A .seeker form{grid-template-columns:1fr}.A .nav .btn-glass{display:none}
  .A .hero .wrap{padding-bottom:12rem}.A .wrap{width:calc(100% - 32px)}
}


/* ---------- client strip ---------- */
.A .clients{padding:2.5rem 0 0;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.A .clients .row{display:flex;gap:3.5rem;width:max-content;animation:mq 60s linear infinite}
.A .clients:hover .row{animation-play-state:paused}
.A .clients span{font-family:"Instrument Serif",serif;font-size:1.9rem;color:#7b746b;white-space:nowrap;transition:color .3s}
.A .clients span:hover{color:var(--ink)}
.A .clients i{font-style:normal;color:var(--terra);font-size:1rem;align-self:center}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- contact / enquiry ---------- */
.A .contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:4rem;align-items:start}
.A .contact h2{font-size:clamp(2.6rem,4.6vw,4.2rem);line-height:1;margin-top:1rem}
.A .contact h2 em{font-style:italic;color:var(--terra)}
.A .contact .lead{color:var(--ink-2);margin-top:1rem;max-width:30rem}
.A .cinfo{margin-top:2.2rem;border-top:1px solid var(--hair)}
.A .cinfo a,.A .cinfo div{display:grid;grid-template-columns:24px 1fr;gap:.8rem;padding:1rem 0;border-bottom:1px solid var(--hair);color:var(--ink-2);transition:color .2s}
.A .cinfo a:hover{color:var(--terra)}
.A .cinfo i{color:var(--terra);margin-top:.2rem}
.A .regions{margin-top:2rem;display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.6rem}
.A .regions b{display:block;font-size:.86rem}
.A .regions span{font-size:.8rem;color:var(--mut)}
.A .enq{background:#fff;border:1px solid var(--hair);border-radius:24px;padding:clamp(1.5rem,3vw,2.4rem);box-shadow:0 1px 2px rgba(0,0,0,.04),0 30px 60px -40px rgba(31,28,25,.35)}
.A .enq h3{font-family:"Instrument Serif";font-weight:400;font-size:2rem;line-height:1}
.A .enq p.s{color:var(--mut);font-size:.9rem;margin:.4rem 0 1.4rem}
.A .toggle{display:grid;grid-template-columns:1fr 1fr;padding:.3rem;border-radius:999px;background:var(--paper-2);margin-bottom:1.2rem}
.A .toggle label{text-align:center;padding:.65rem;border-radius:999px;font-weight:600;font-size:.88rem;color:var(--mut);cursor:pointer;transition:background .25s,color .25s,box-shadow .25s}
.A .toggle input{position:absolute;opacity:0;pointer-events:none}
.A .toggle label:has(input:checked){background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.A .toggle label:has(input:focus-visible){outline:2px solid var(--terra);outline-offset:2px}
.A .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.A .fl{position:relative}
.A .fl.full{grid-column:1/-1}
.A .fl input,.A .fl select,.A .fl textarea{width:100%;padding:1.45rem 1rem .55rem;border-radius:14px;border:1px solid rgba(31,28,25,.16);background:var(--paper);outline:0;font-size:.95rem;transition:border-color .2s,background .2s,box-shadow .2s;resize:vertical}
.A .fl textarea{min-height:110px}
.A .fl label{position:absolute;left:1rem;top:.55rem;font-size:.72rem;font-weight:700;color:var(--mut);pointer-events:none}
.A .fl input:focus,.A .fl select:focus,.A .fl textarea:focus{border-color:var(--ink);background:#fff;box-shadow:0 0 0 4px rgba(212,43,31,.1)}
.A .enq .btn{width:100%;justify-content:center;padding:1.05rem;margin-top:1rem}
.A .enq .fine{display:block;text-align:center;font-size:.78rem;color:var(--mut);margin-top:.8rem}
.A .seeker .fine{font-size:.78rem;color:var(--mut)}
@media (max-width:1020px){.A .contact{grid-template-columns:1fr}}
@media (max-width:560px){.A .fgrid,.A .regions{grid-template-columns:1fr}}

/* ---------- footer (same structure as before, Stories palette: ink card on a terracotta band) ---------- */
.site-footer{padding:0 12px 12px;background:linear-gradient(180deg,var(--paper) 0,#efb9a6 18%,#d42b1f 55%,#a8211a);font-family:Figtree,system-ui,sans-serif}
.foot-card{background:#1f1c19;color:#b9b1a6;border-radius:24px;padding:clamp(1.6rem,3vw,2.6rem) clamp(1.2rem,3vw,2.8rem) 1.4rem;font-size:.88rem}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.foot-logo{padding:10px 18px;border-radius:16px}
.foot-logo img{height:64px}
.status-pill{display:inline-flex;align-items:center;gap:.55rem;padding:.45rem .95rem;border:1px solid rgba(255,255,255,.14);border-radius:999px;font-size:.78rem;color:#e7e0d6}
.status-pill i{width:9px;height:9px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 4px rgba(74,222,128,.18);animation:blink 2s ease-in-out infinite}
@keyframes blink{50%{box-shadow:0 0 0 7px rgba(74,222,128,.05)}}
.foot-links{display:grid;grid-template-columns:repeat(6,1fr);gap:1.5rem;margin-top:clamp(3rem,6vw,4.5rem)}
.foot-links h4{color:#8d857b;font-size:.76rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin:0 0 1rem}
.foot-links ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.foot-links a,.foot-links li{color:#e7e0d6;font-size:.84rem}
.foot-links a{transition:color .2s}
.foot-links a:hover{color:#ffb39f}
.foot-badges{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin:3rem 0 0}
.honor{display:flex;align-items:center;gap:1rem;padding:.7rem 1rem .7rem .7rem;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.03)}
.honor b{display:grid;place-items:center;min-width:64px;height:42px;padding:0 .6rem;border-radius:10px;background:#d42b1f;color:#fff;font-family:"Instrument Serif";font-weight:400;font-size:1.2rem}
.honor span{font-size:.78rem;color:#e7e0d6;line-height:1.35}
.badges{display:flex;gap:.7rem;flex-wrap:wrap}
.badges span{display:grid;place-items:center;text-align:center;width:66px;height:76px;padding:.4rem .3rem .95rem;background:#faf7f2;color:#1f1c19;font-size:.56rem;font-weight:800;letter-spacing:.06em;line-height:1.15;text-transform:uppercase;clip-path:polygon(0 0,100% 0,100% 80%,50% 100%,0 80%);border-radius:6px 6px 0 0}
.badges span em{display:block;font-style:normal;font-family:"Instrument Serif";font-weight:400;font-size:1.25rem;color:#d42b1f;letter-spacing:0}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;margin-top:2.2rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.08);font-size:.76rem}
.foot-bottom .left{display:flex;gap:2.5rem;flex-wrap:wrap}
.foot-bottom .left a{color:#faf7f2;font-weight:700}
.socials{display:flex;gap:1rem}
.socials a{color:#e7e0d6;font-size:1.1rem;display:inline-flex;transition:color .2s}
.socials a:hover{color:#ffb39f}
@media (max-width:1000px){.foot-links{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.foot-links{grid-template-columns:repeat(2,1fr)}}

/* ---------- sectors: auto-sliding row of the four major industries ---------- */
.A .ind-row{padding-top:2.6rem}
.A .ind-row .tile{flex:0 0 clamp(280px,42vw,620px);height:clamp(340px,34vw,460px);scroll-snap-align:start}
.A .ind-row .tile h3{font-size:clamp(1.9rem,3vw,2.6rem)}
.A .ind-foot{margin-top:1.6rem}

/* ---------- services: swipeable photo cards (ref: YLLW) ---------- */
.A .svc-head{display:flex;justify-content:space-between;align-items:end;gap:2rem;flex-wrap:wrap}
.A .svc-head h2{font-size:clamp(2.6rem,4.6vw,4.2rem);line-height:1.02;margin-top:1rem;max-width:22ch}
.A .svc-head h2 em{font-style:italic;color:var(--terra)}
.A .svc-side{display:flex;align-items:end;gap:2rem}
.A .svc-side p{color:var(--ink-2);max-width:24rem;font-size:.95rem}
.A .arrows{display:flex;gap:.5rem;flex:none}
.A .arrows button{width:48px;height:48px;border-radius:50%;border:1px solid var(--hair);background:#fff;cursor:pointer;display:grid;place-items:center;font-size:1.1rem;transition:background .25s,color .25s,border-color .25s}
.A .arrows button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.A .svc-row{display:flex;gap:1.2rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:2.6rem clamp(24px,4vw,80px) 1rem;scroll-padding-inline:clamp(24px,4vw,80px)}
.A .svc-row::-webkit-scrollbar{display:none}
.A .svc{position:relative;flex:0 0 clamp(280px,30vw,380px);aspect-ratio:3/4;border-radius:22px;overflow:hidden;scroll-snap-align:start;color:#fff;isolation:isolate;background:var(--ink)}
.A .svc > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.A .svc::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(15,12,9,.55) 0%,rgba(15,12,9,0) 32%,rgba(15,12,9,0) 45%,rgba(15,12,9,.88) 100%);transition:background .5s}
.A .svc:hover > img{transform:scale(1.06)}
.A .svc .no{position:absolute;left:1.3rem;top:1.2rem;font-family:"Instrument Serif";font-size:1.1rem;opacity:.85}
.A .svc .top{position:absolute;left:1.3rem;right:1.3rem;top:3rem}
.A .svc h3{font-family:"Instrument Serif";font-weight:400;font-size:2.1rem;line-height:1}
.A .svc .bottom{position:absolute;left:1.3rem;right:1.3rem;bottom:1.3rem;display:grid;gap:.9rem}
.A .svc p{font-size:.9rem;color:rgba(255,255,255,.85)}
.A .svc ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.35rem;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s cubic-bezier(.16,1,.3,1),opacity .4s}
.A .svc:hover ul,.A .svc:focus-within ul{max-height:120px;opacity:1}
.A .svc li{padding:.3rem .65rem;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);font-size:.74rem;font-weight:600}
.A .svc .acts{display:flex;gap:.5rem}
.A .svc .acts a{display:inline-flex;align-items:center;gap:.4rem;padding:.65rem 1rem;border-radius:999px;font-size:.84rem;font-weight:600;transition:background .25s,color .25s}
.A .svc .quote{background:#fff;color:var(--ink)}
.A .svc .quote:hover{background:var(--terra);color:#fff}
.A .svc .more{border:1px solid rgba(255,255,255,.4);color:#fff}
.A .svc .more:hover{background:rgba(255,255,255,.15)}
.A .svc.type{background:#efe6da;color:var(--ink)}
.A .svc.type::after{display:none}
.A .svc.type p{color:var(--ink-2)}
.A .svc.type li{background:#fff;border-color:var(--hair);backdrop-filter:none}
.A .svc.type .quote{background:var(--ink);color:#fff}
.A .svc.type .more{border-color:var(--hair);color:var(--ink)}
.A .svc.type .more:hover{background:#fff}
.A .svc.type .big{position:absolute;right:-1.5rem;top:5.5rem;font-family:"Instrument Serif";font-size:15rem;line-height:1;color:var(--terra);opacity:.14}

/* ---------- testimonials (ref: 15Five) ---------- */
.A .sample-flag{align-self:center;padding:.35rem .8rem;border-radius:999px;border:1px dashed var(--terra);color:var(--terra-2);font-size:.74rem;font-weight:700}
.A .testi{display:grid;grid-template-columns:minmax(0,1fr) 440px;height:480px;margin-top:2.6rem;border-radius:26px;overflow:hidden;background:var(--ink);color:#faf7f2}
.A .testi .q{position:relative;min-height:0;overflow:hidden;padding:clamp(2rem,4vw,3.4rem);display:flex;flex-direction:column;justify-content:space-between;gap:2rem}
.A .testi .mark{font-family:"Instrument Serif";font-size:6rem;line-height:.6;color:var(--terra);height:2.4rem}
.A .testi blockquote{margin:0;font-family:"Instrument Serif";font-size:clamp(1.7rem,2.8vw,2.5rem);line-height:1.15;animation:tIn .7s cubic-bezier(.16,1,.3,1) both}
.A .testi .who{display:flex;align-items:center;gap:.9rem;animation:tIn .7s .1s cubic-bezier(.16,1,.3,1) both}
.A .testi .who i{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--terra);color:#fff;font-style:normal;font-weight:700;font-size:.9rem}
.A .testi .who b{display:block}
.A .testi .who span{font-size:.85rem;color:#b9b1a6}
.A .testi .ph{position:relative;overflow:hidden;width:440px;height:480px}
.A .testi .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:tImg 1.1s cubic-bezier(.16,1,.3,1) both}
.A .testi .ph .kind{position:absolute;left:1rem;top:1rem;padding:.35rem .75rem;border-radius:999px;background:rgba(250,247,242,.92);color:var(--ink);font-size:.74rem;font-weight:700}
@keyframes tIn{from{opacity:0;transform:translateY(14px)}}
@keyframes tImg{from{opacity:0;transform:scale(1.08)}}
.A .tdots{display:flex;justify-content:center;gap:.5rem;margin-top:1.4rem}
.A .tdots button{position:relative;width:8px;height:8px;padding:0;border:0;border-radius:99px;background:rgba(31,28,25,.2);cursor:pointer;overflow:hidden;transition:width .4s}
.A .tdots button.on{width:44px}
.A .tdots button.on::after{content:"";position:absolute;inset:0;background:var(--terra);transform-origin:left;animation:tFill 6s linear forwards}
.A .testi:hover ~ .tdots button.on::after{animation-play-state:paused}
@keyframes tFill{from{transform:scaleX(0)}}

/* ---------- request a call back (floats on the footer band) ---------- */
.callback{position:relative;z-index:2;width:min(1100px,100%);margin:0 auto 1.4rem;display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr auto;gap:.5rem;align-items:center;padding:.55rem;border-radius:999px;background:#fff;box-shadow:0 20px 50px -24px rgba(90,30,15,.55);font-family:Figtree,system-ui,sans-serif}
.callback .cb-t{padding:0 1rem 0 1.2rem;line-height:1.25}
.callback .cb-t b{display:block;font-size:.95rem;color:#1f1c19}
.callback .cb-t span{font-size:.76rem;color:#7b746b}
.callback input,.callback select{width:100%;min-width:0;padding:.85rem 1rem;border-radius:999px;border:1px solid rgba(31,28,25,.12);background:#faf7f2;outline:0;font-size:.9rem;color:#1f1c19;transition:border-color .2s,background .2s}
.callback input:focus,.callback select:focus{border-color:#1f1c19;background:#fff}
.callback .cb-go{display:inline-flex;align-items:center;gap:.5rem;height:48px;padding:0 1.4rem;border:0;border-radius:999px;background:#1f1c19;color:#fff;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .25s}
.callback .cb-go:hover{background:#d42b1f}
.site-footer{padding-top:2.5rem;background:linear-gradient(180deg,#faf7f2 0,#f3d2c4 70px,#e3805f 200px,#d42b1f 380px,#a8211a)}

@media (max-width:1020px){
  .A .testi{grid-template-columns:1fr;height:auto}.A .testi .ph{width:100%;height:300px;order:-1}
  .callback{grid-template-columns:1fr 1fr;border-radius:24px}.callback .cb-t{grid-column:1/-1;padding:.4rem .6rem}.callback .cb-go{grid-column:1/-1;justify-content:center}
  .A .svc-side{flex-wrap:wrap}
}
@media (max-width:560px){.callback{grid-template-columns:1fr}.A .svc{flex-basis:82vw}}

/* ---------- mobile menu ---------- */
.A .menu-toggle{display:none;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.14);color:inherit;font-size:1.25rem;cursor:pointer;backdrop-filter:blur(10px)}
.A .nav.solid .menu-toggle,.A .nav.menu-open .menu-toggle{border-color:var(--hair);background:#fff;color:var(--ink)}
.A .menu-toggle .i-close,.A .menu-toggle[aria-expanded=true] .i-open{display:none}
.A .menu-toggle[aria-expanded=true] .i-close{display:block}
@media (max-width:1020px){
  .A .menu-toggle{display:grid}
  .A .nav .links.open{display:flex;flex-direction:column;gap:0;position:absolute;top:calc(100% - 6px);left:0;right:0;padding:.5rem;border-radius:20px;background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08),0 24px 48px -16px rgba(31,28,25,.35);opacity:1;pointer-events:auto;animation:menuIn .3s cubic-bezier(.16,1,.3,1)}
  .A .nav .links.open a{padding:.9rem 1rem;border-radius:12px;font-size:1rem;opacity:1}
  .A .nav .links.open a:hover{background:var(--paper-2)}
  .A .nav .links.open a[aria-current=page]{background:var(--paper-2);color:var(--terra);font-weight:600}
}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px)}}