/* Phone + tablet fixes (design review 4). Everything is gated at ≤1024px, so desktop is untouched. */
@media (max-width:1024px){
:root{--on-light-muted:#54493a;--on-dark-muted:rgba(236,228,212,.8);--on-dark-faint:rgba(236,228,212,.6)}
main p:not(.__){font-weight:400}
.vp-search-cta,.vault-preview .vp-search-cta{white-space:nowrap}
.legacy-banner .banner-bg::after{background:linear-gradient(180deg,rgba(10,8,7,.2) 0%,rgba(10,8,7,.24) 30%,rgba(10,8,7,.72) 60%,rgba(10,8,7,.97) 100%)}
.tier-prov,.tier-sent{grid-template-columns:1fr}
.tier-prov .img-panel{order:-1}
.tier-prov .img-panel,.tier-sent .img-panel{min-height:clamp(320px,62vw,560px)}
.hero .hero-content{gap:14px}.hero .hero-headline{line-height:1.1}
.origin-copy .pull{color:var(--on-light)!important;opacity:1!important}
.form-label .num{display:none}
.form-field::placeholder{color:rgba(236,228,212,.6)}
.privacy-note{font-size:10px;color:var(--on-dark-muted)}
.vault-notes{grid-template-columns:1fr;gap:20px;max-width:460px}
.vault-note p{font-size:13px}
}
@media (min-width:761px) and (max-width:1024px){
.editions{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.edition-media{aspect-ratio:3/4}
}
@media (min-width:761px) and (max-width:1024px) and (orientation:landscape){
.hero-a .hero-fade{background:linear-gradient(90deg,rgba(10,8,7,.85) 0%,rgba(10,8,7,.62) 34%,rgba(10,8,7,.2) 60%,transparent 80%),linear-gradient(180deg,rgba(10,8,7,.1) 0%,transparent 30%,transparent 70%,rgba(10,8,7,.55) 100%)}
}
@media (max-width:760px){
.edition-media{aspect-ratio:1/1}
/* Services: comparison table on phones — pick an edition from a pinned switcher (the common
   mobile pricing pattern); each feature then reads as one line with its tick, nothing to swipe. */
.ctable-scroll{overflow:visible}
.ct-switch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;position:sticky;top:56px;z-index:6;margin:28px 0 4px;padding:4px;background:#15110d;border:1px solid rgba(201,163,122,.28);border-radius:999px;box-shadow:0 10px 24px -12px rgba(0,0,0,.8)}
.ct-switch button{font-family:var(--f-body);font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--on-dark-muted);background:transparent;border:0;border-radius:999px;min-height:44px;padding:6px 4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:background .25s,color .25s}
.ct-switch button small{font-size:7.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-faint)}
.ct-switch button[aria-pressed="true"]{background:var(--bronze);color:#0a0807}
.ct-switch button[aria-pressed="true"] small{color:rgba(10,8,7,.7)}
table.ctable,table.ctable tbody{display:block;min-width:0!important;width:100%}
table.ctable thead{display:none}
table.ctable tr{display:grid;grid-template-columns:minmax(0,1fr) 40px;align-items:center;border-bottom:1px solid rgba(201,163,122,.12)}
table.ctable td{border-bottom:0!important;padding:14px 0!important}
table.ctable td:first-child{text-align:left;font-size:13px;line-height:1.45;color:var(--on-dark);width:auto!important;min-width:0!important}
table.ctable td:not(:first-child){display:none;text-align:right}
table.ctable[data-tier="2"] td:nth-child(2),table.ctable[data-tier="3"] td:nth-child(3),table.ctable[data-tier="4"] td:nth-child(4){display:block}
table.ctable tr.off td:first-child{color:var(--on-dark-faint)}
table.ctable .ctable-group{display:block;border-bottom:1px solid rgba(201,163,122,.25)}
table.ctable .ctable-group td{display:block;text-align:left;padding:26px 0 8px!important}
table.ctable tbody tr:hover{background:none}
.compare-hint{display:none!important}
.tier-prov .img-panel,.tier-sent .img-panel{min-height:0!important;width:100%;max-width:100%}
/* Partners */
.partners-page .hero-fade{background:linear-gradient(to top,rgba(10,8,7,.95) 0%,rgba(10,8,7,.82) 45%,rgba(10,8,7,.4) 72%,rgba(10,8,7,.15) 100%)}
.int-card{min-height:0;padding:28px 24px}
.int-card .card-num{margin-bottom:12px}
.int-card .card-icon{margin-bottom:16px}
.benefit-table thead{display:none}
.benefit-table,.benefit-table tbody{display:block}
.benefit-table tbody tr{display:block;padding:18px 0}
.benefit-table tbody td{display:block;padding:0!important;white-space:normal}
.benefit-table tbody td+td{padding-top:6px!important}
/* About */
.prob-stat{padding:40px 20px 32px;gap:14px}
.prob-stat::before{top:16px}
.founder-body.is-clamped p:nth-of-type(n+3){display:none}
.founder-more{display:inline-flex;align-items:center;gap:10px;margin-top:6px;padding:10px 0;background:none;border:0;border-bottom:1px solid var(--bronze);color:var(--bronze);font:500 10.4px var(--f-body);letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
/* Vault Lookup: keep the footer below the fold */
.vault-main{min-height:calc(100svh - 40px)}
/* Inside Shado */
.stage-heading{display:none}
.after-experience h2{font-size:clamp(34px,10vw,44px);text-wrap:balance}
.after-experience h2 br{display:none}
}
@media (min-width:761px){.founder-more{display:none}}
/* Cookie bar: text and buttons grouped and centred as one footer row */
@media (min-width:1025px){
.ck-main{max-width:1180px;margin:0 auto;justify-content:center;gap:48px;padding:18px 40px}
.ck-text{flex:1 1 auto;max-width:720px}
.ck-actions{flex-shrink:0}
}
/* Cookie bar: buttons never wrap; text runs full width above the buttons on tablet */
.ck-btn{white-space:nowrap}
@media (min-width:861px) and (max-width:1024px){
.ck-main{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 32px;padding:16px 24px}
.ck-text{flex:1 1 auto;max-width:560px;font-size:13px;line-height:1.6}
.ck-actions{flex-shrink:0}
.ck-btn{padding:12px 18px}
}
@media (max-width:860px){.ck-btn-text{grid-column:auto;order:0;padding:13px 10px;justify-self:stretch;border:1px solid rgba(236,228,212,.3)}}
/* Cookie bar: slimmer on phones */
@media (max-width:600px){
.ck-main{gap:12px;padding:14px 16px calc(14px + env(safe-area-inset-bottom))}
.ck-text{font-size:12.5px;line-height:1.6}
.ck-title{display:block;font-size:16px;margin:0 0 2px}
.ck-btn{padding:11px 8px}
.ck-btn-text{padding:11px 8px}
}

/* ── Touch-up pass (phones + tablets only; desktop untouched) ── */
@media (max-width:900px){
/* Home · The Method: the image column was forcing a 600px track, so the page slid sideways on phones */
.shado-method .invisible-grid{grid-template-columns:minmax(0,1fr)!important}
.shado-method .invisible-grid>*{min-width:0}
.shado-method .feature-grid{max-width:100%}
}
@media (max-width:1024px){
/* Bigger touch areas without changing how they look: invisible padding around arrow links */
.btn-arrow,.after-experience a{position:relative}
.btn-arrow::before,.after-experience a::before{content:"";position:absolute;inset:-10px -4px}
.as-replay{min-height:44px}
/* Toggles and tabs reach a comfortable 44px tap height */
.mode-button,.clasp-tab,.img-toggle,.tg-skin,.vault-btn{min-height:44px}
.experience-nav a{min-height:44px;display:inline-flex;align-items:center}
}
@media (max-width:760px){
/* Small caps labels were 7.5–9px on phones; lift them to a readable 10px */
.eyebrow,.hero-label,.hero-eyebrow,.section-eyebrow,.tier-eyebrow,.scenario-label,.img-panel-label,.edition-sub,.esg-meta-label,.prob-src,.stat-cell-source,.data-label,.item-id{font-size:10px!important}
.tughra-caps,.form-label{font-size:10.5px!important}
/* Services · Tughra finishes: one swipeable row instead of wrapping onto three lines */
.tg-skins{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;margin-inline:calc(var(--gutter,20px)*-1);padding-inline:var(--gutter,20px);-webkit-mask:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 24px),transparent)}
.tg-skins::-webkit-scrollbar{display:none}
.tg-skin{flex:none;scroll-snap-align:start}
/* Services · Watch/Handbag toggle sits a little clear of the image edge */
.img-toggles{left:16px;bottom:16px}
}

/* ── Readability floor (every page, every screen size) ──
   Small caps labels, captions and footer notes were set between 7px and 9.6px.
   None of these classes is used anywhere at a larger size, so this only lifts small text. */
.eyebrow,.hero-label,.hero-eyebrow,.section-eyebrow,.tier-eyebrow,.about-eyebrow,.media-eyebrow,.edition-sub,
.scenario-label,.img-panel-label,.esg-meta-label,.prob-src,.stat-cell-source,.data-label,.data-sub,.item-id,
.card-disclaimer,.card-num,.pn,.num,.form-label,.policy-label,.meta-key,.toc-label,.toc-num,
.section-num,.annex-label,.acl-label,.clause-ref,.sub-heading,.doc-link,.doc-status,.cta,.th-status,.img-toggle,
.compare-hint,.mode-switch>span,.mode-button,.response-record>span,.illustration-note,.stage-edition,.cs-label,
.as-cap>span,.as-replay,.chapter-nav>a,.scroll-cue>span,.status-badge>span,.vp-search-cta>span,.founder-title,
.purpose-callout>cite,.chip,.results-count,.sort-label,.sort-toggle>button,.article-tag,.article-ext,.load-more,
.btn,.btn-arrow,.vault-btn,.footer-heading,.footer-bottom,.footer-disclaimer>p,.site-footer .container>p,
.ck-reopen,.ck-always,.tughra-caps{font-size:10.5px!important}
.ct-switch button small{font-size:9px;letter-spacing:.1em}

/* Very small phones (320px): two-column grids that collapse to one must be allowed to shrink */
@media (max-width:760px){
.believe-grid,.origin-split,.founder-split,.responsibility-grid{grid-template-columns:minmax(0,1fr)!important}
.believe-grid>*,.origin-split>*,.founder-split>*,.responsibility-grid>*{min-width:0}
.sort-toggle{flex-wrap:wrap}
.acc-trigger>*{min-width:0;overflow-wrap:anywhere}
.acc-trigger .acc-icon{flex:none}
}


/* Tughra slide dots and hint (phones only, switched on in the 760px block above) */
.tg-dots{display:none;flex-direction:column;align-items:center;gap:6px;margin:18px auto 0}
.tg-dots-row{display:flex;gap:2px}
.tg-dots button{width:32px;height:32px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.tg-dots button::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:rgba(122,96,64,.3);transition:background .25s,transform .25s}
.tg-dots button.on::after{background:var(--bronze-deep,#7a6040);transform:scale(1.25)}
.tg-dots-hint{font-family:var(--f-body);font-size:12px;letter-spacing:.02em;color:var(--on-light-muted);text-align:center}

/* Phones and tablets: swipe from the card to the full certificate, shown upright at the screen's width.
   The row takes the height of whichever slide is showing, so there is no empty gap. */
@media (max-width:1024px){
.tg-app{flex-wrap:nowrap;justify-content:flex-start;align-items:flex-start;transition:height .35s ease;gap:16px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;max-width:340px}
.tg-app::-webkit-scrollbar{display:none}
.tg-app .ph{order:1;flex:0 0 100%;max-width:none;width:100%;aspect-ratio:380/570;padding:0;border-radius:0;background:none;box-shadow:none;scroll-snap-align:center;scroll-snap-stop:always}
.tg-app .ph::before,.tg-app .ph::after{display:none}
.tg-app .tgf{background:transparent;border-radius:0}
.tg-app .ph.land{display:block;order:2;flex:0 0 100%;width:100%;max-width:none;aspect-ratio:330/200}
.tg-dots{display:flex!important}
}
/* Tablets: the same, just larger */
@media (min-width:761px) and (max-width:1024px){
.tg-app{max-width:640px;gap:24px}
.tg-app .ph:not(.land){aspect-ratio:auto;display:flex;justify-content:center}
.tg-app .ph:not(.land) .tgf{width:min(100%,420px);height:auto;aspect-ratio:380/570}
.tg-dots-hint{font-size:13px}
}

/* Contact: the note under the send button reads as a quiet footnote in the body font */
.privacy-note{font-family:var(--f-body)!important;font-size:11.5px!important;letter-spacing:.01em!important;line-height:1.6!important;color:var(--on-dark-muted)!important;max-width:520px!important}

/* Cookie banner on phones and portrait tablets: title, short text, two equal choices, "Manage" as a quiet link beneath */
@media (max-width:860px){
.ck-bar{max-height:88svh}
.ck-main{max-width:640px;margin:0 auto}
.ck-main{gap:14px;padding:18px 20px calc(16px + env(safe-area-inset-bottom))}
.ck-title{display:block;font-size:18px;margin:0 0 4px}
.ck-text{font-size:13px;line-height:1.55}
.ck-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:10px}
.ck-btn{padding:14px 8px;min-height:46px;font-size:10.5px;letter-spacing:.14em}
.ck-btn-line{order:1}
.ck-btn-fill{order:2}
.ck-btn-text{grid-column:1/-1;order:3;justify-self:center;border:0!important;padding:4px 12px!important;min-height:36px;text-decoration:underline;text-underline-offset:4px;letter-spacing:.12em}
.ck-panel{padding:0 20px 8px}
.ck-row{gap:16px;padding:14px 0}
.ck-bar:has(.ck-panel:not([hidden])) .ck-btn-text{justify-self:stretch;border:1px solid rgba(201,163,122,.6)!important;color:#e6cdac;text-decoration:none;min-height:46px;padding:12px!important}
}
/* Cookie settings sits in the footer's Support list, styled like the links around it */
.footer-col li .ck-reopen{font-size:inherit!important;letter-spacing:inherit;text-decoration:none;color:inherit;text-align:left;padding:0;line-height:inherit}
.site-footer .footer-col li{font-size:11.2px}
.footer-col li .ck-reopen{color:rgba(236,228,212,.8)}
.footer-col li .ck-reopen:hover{color:var(--bronze-2,#c9a37a)}

/* Vault sample card: keep a gap between the two label columns, and tighten the letter spacing so labels never run together */
.card-data{column-gap:18px}
.card-data .data-label{letter-spacing:.14em!important;overflow-wrap:anywhere}
@media (max-width:760px){.card-data{grid-template-columns:1fr 1fr!important}}
/* Services, phones: close the empty band between Sentinel and the Guardian strip */
@media (max-width:760px){
.tier-sent + div[style*="height:72px"]{display:none}
.tier-sent .tier-copy{padding-bottom:40px!important}
.guardian-quiet{padding-bottom:56px!important}
}
/* Partners, phones: pilot card titles run on one line */
@media (max-width:760px){.int-card .card-title br{display:none}}
/* Press, phones: the lead story headline at a size that suits a phone */
@media (max-width:760px){.press-lead .article-title{font-size:28px!important;line-height:1.15!important;hyphens:none}}
/* Vault result, phones: photo and name share the top row, the status badge sits beneath */
@media (max-width:760px){
.card-head{flex-wrap:wrap;row-gap:14px}
.card-head-left{flex:1 1 100%;min-width:0}
.card-head-text{flex:1 1 auto;min-width:0}
.card-head .item-id{white-space:nowrap}
}
/* Sample and vault record cards: values in a row line up even when a label wraps */
.card-data .data-cell{display:flex;flex-direction:column}
.card-data .data-cell>.data-label{margin-bottom:6px}
.card-data .data-cell>:nth-child(2){margin-top:auto}
@media (max-width:760px){.card-data .data-value{white-space:nowrap}}
/* Services, tablets: all three app screens fit side by side (no swipe needed) */
@media (min-width:761px) and (max-width:1024px){
.app-strip{grid-template-columns:repeat(3,minmax(0,1fr))!important;overflow:visible!important;column-gap:24px;align-items:end}
.app-strip .ph{max-width:100%}
}
/* Touchscreens can't hover, so the "hover any feature" hint is hidden there */
@media (hover:none){.compare-hint{display:none!important}}
/* Partners, tablets: "Why partners choose Shado" stacks so the table gets the full width */
@media (min-width:761px) and (max-width:1024px){
.why-inner{grid-template-columns:minmax(0,1fr)!important;row-gap:48px}
.why-inner>*{min-width:0;max-width:none}
.why-inner>:last-child:not(:has(table)){max-width:440px;width:100%;margin:0 auto}
}
/* Warranty, phones: the regions table becomes one stacked block per region */
@media (max-width:760px){
.region-table thead{display:none}
.region-table,.region-table tbody,.region-table tr,.region-table td{display:block;width:100%}
.region-table tr{padding:16px 0;border-bottom:1px solid rgba(26,20,14,.12)}
.region-table td{padding:3px 0!important;border:0!important}
.region-table td:first-child{font-weight:600;margin-bottom:4px}
.region-table td:nth-child(2)::before{content:"Warranty period: ";opacity:.65}
.region-table td:nth-child(3)::before{content:"Basis: ";opacity:.65}
}
/* Press, phones: smaller thumbnails so each headline has room to read */
@media (max-width:760px){.article-card:not(.press-lead){grid-template-columns:100px minmax(0,1fr)!important;column-gap:16px!important}.article-card:not(.press-lead) .article-title{font-size:16px!important;line-height:1.3!important}}
@media (max-width:760px){.article-card:not(.press-lead) .article-img-wrap{width:100px!important;min-width:0!important;max-width:100px!important}.article-card:not(.press-lead) .article-img-wrap img{width:100%!important}}

/* Stop iPhone Safari from automatically enlarging text in some blocks (it made the Contact note look oversized) */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.privacy-note{display:block!important;text-wrap:pretty}
/* Services: Guardian is its own band, bronze, between Sentinel (black) and the Shado Module (cream) */
.guardian-quiet{background:linear-gradient(180deg,#8a6a45 0%,#7a5c3b 100%)!important;padding:56px var(--gutter,24px) 60px!important;border-top:0!important}
.guardian-quiet .tier-eyebrow{color:#f3e2c7!important}
.guardian-quiet-line{color:#fbf5ea!important}
@media (max-width:1024px){.tg-tap-hint{display:none}.tg-dots-hint{line-height:1.6}}

/* Link arrows: a fine drawn line with an open head, matching the "Send your enquiry" button (replaces the font arrow, which phones showed in an emoji-like system font) */
.arw{display:inline-block;position:relative;width:18px;height:1px;background:currentColor;vertical-align:middle;margin-left:10px;top:-1px;transition:transform .3s ease}
.arw::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
a:hover .arw,a:focus-visible .arw{transform:translateX(4px)}
.guide .guide-card-title::after{content:""!important;display:inline-block;width:20px;height:9px;margin-left:10px;vertical-align:middle;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 9' fill='none' stroke='%237a6040' stroke-width='1'%3E%3Cpath d='M0 4.5h19M15 1l4 3.5L15 8'/%3E%3C/svg%3E") center/contain no-repeat}
/* Home hero, phones: the phone-only photo is framed on the raised wrist and watch */
@media (max-width:760px){.hero-a .hero-img{object-position:48% 50%!important}}