/* The named values live in tokens.css, which the Studio loads as well, so a colour
   changed there changes in both. */
[data-version="2"]{ --body-font:'Lora', Georgia, serif; --tag-font:'Lora', Georgia, serif; }
[data-version="3"]{ --body-font:'Spectral', Georgia, serif; --tag-font:'Spectral', Georgia, serif; }

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  font-size:18px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.head{font-family:var(--head);font-weight:400;color:var(--navy);letter-spacing:.02em;line-height:1.15;margin:0;}
small{font-size:12px}
.eyebrow{font-family:var(--head);text-transform:uppercase;letter-spacing:.28em;font-size:12px;font-weight:500;color:var(--gold-deep);}
.tagline{font-family:var(--body);font-style:italic;font-weight:300;color:var(--gold);}
a{color:inherit;text-decoration:none;cursor:pointer;}
img{max-width:100%;display:block;}
button{font-family:var(--head);cursor:pointer;border:none;background:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}
/* The number between the two quantity buttons is typed as well as stepped, so twenty does not
   have to be reached by pressing a button twenty times. The browser's own spinner comes off,
   because the two buttons already do that job. */
.qty-field{width:44px;min-width:44px;height:26px;text-align:center;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--navy);font-family:var(--head);font-size:14px;padding:0 2px;-moz-appearance:textfield;appearance:textfield}
.qty-field::-webkit-outer-spin-button,.qty-field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-field:focus-visible{outline:2px solid var(--gold-deep);outline-offset:1px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--head);text-transform:uppercase;letter-spacing:.18em;font-size:12.5px;font-weight:500;padding:15px 30px;border-radius:2px;transition:.25s;cursor:pointer;border:1px solid transparent;}
.btn-gold{background:var(--gold);color:var(--navy);}
.btn-gold:hover{background:var(--gold-deep);color:var(--white);}
.btn-navy{background:var(--navy);color:var(--cream);}
.btn-navy:hover{background:var(--navy-2);}
.btn-ghost{background:transparent;border:1px solid var(--gold);color:var(--gold);}
.btn-ghost:hover{background:var(--gold);color:var(--navy);}
.btn-ghost-navy{background:transparent;border:1px solid var(--navy);color:var(--navy);}
.btn-ghost-navy:hover{background:var(--navy);color:var(--cream);}
.btn-block{width:100%;}

/* version toggle bar */
#versionBar{background:var(--navy);color:var(--cream);position:sticky;top:0;z-index:80;}
#versionBar .wrap{display:flex;align-items:center;gap:18px;padding-top:9px;padding-bottom:9px;flex-wrap:wrap;}
#versionBar .vlabel{font-family:var(--head);text-transform:uppercase;letter-spacing:.22em;font-size:12px;color:var(--gold);}
.vbtns{display:flex;gap:8px;flex-wrap:wrap;}
.vbtn{font-family:var(--head);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#aeb4d0;border:1px solid #2b3866;background:transparent;padding:7px 14px;border-radius:2px;transition:.2s;}
.vbtn:hover{color:var(--cream);border-color:var(--gold);}
.vbtn.active{background:var(--gold);color:var(--navy);border-color:var(--gold);font-weight:500;}
#versionBar .vnote{margin-left:auto;font-family:var(--body);font-size:12.5px;color:#9aa0c0;font-style:italic;}

/* announcement */
#announce{background:var(--cream-2);border-bottom:1px solid var(--line);text-align:center;}
#announce .wrap{padding:9px 32px;font-family:var(--head);text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:var(--ink);}

/* header */
header#site{position:sticky;top:0;z-index:60;background:var(--navy);border-bottom:1px solid #25315f;}
#shopMenu{max-width:min(940px,calc(100vw - 32px));}
.header-grid{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;padding:14px 32px;max-width:var(--maxw);margin:0 auto;}
nav.primary{display:flex;gap:26px;align-items:center;justify-self:center;}
nav.primary > a, nav.primary > .has-menu > .navitem{font-family:var(--head);text-transform:none;letter-spacing:.015em;font-size:16px;font-weight:400;color:var(--cream);padding:6px 0;position:relative;background:none;white-space:nowrap;}
nav.primary > .has-menu > .navitem{cursor:pointer;}
nav.primary > a:hover,nav.primary > .has-menu > .navitem:hover{color:var(--gold);}
.has-menu{position:static;}
.dropdown{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);background:var(--white);border:1px solid var(--line);border-top:2px solid var(--gold);box-shadow:0 26px 54px rgba(15,25,68,.2);min-width:332px;padding:12px;border-radius:6px;opacity:0;visibility:hidden;transition:.2s;z-index:80;}
.has-menu:hover .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(2px);}
/* Shut once something in it has been chosen, until the pointer leaves: it opens on hover, and the
   pointer is still over it when the new page arrives. */
.has-menu.dd-shut .dropdown{opacity:0!important;visibility:hidden!important;pointer-events:none}
.dropdown .dd-head{font-family:var(--head);text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:var(--gold-deep);padding:6px 12px 11px;}
.dropdown .dd-item{display:flex;align-items:center;gap:13px;padding:9px 12px;border-radius:5px;transition:.16s;}
.dropdown .dd-item:hover{background:var(--cream);}
.dropdown .dd-thumb{width:48px;height:48px;border-radius:4px;overflow:hidden;border:1px solid var(--line);background:#fff;flex-shrink:0;}
.dropdown .dd-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.dropdown .dd-text{display:flex;flex-direction:column;gap:2px;}
.dropdown .dd-text b{font-family:var(--head);font-weight:500;font-size:13px;letter-spacing:.03em;color:var(--navy);}
.dropdown .dd-text small{font-family:var(--body);font-size:12px;color:#64685B;}
.dropdown .dd-all{display:flex;align-items:center;gap:7px;padding:13px 12px 5px;margin-top:6px;border-top:1px solid var(--line);font-family:var(--head);text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--gold-deep);}
.dropdown .dd-all:hover{color:var(--navy);}

.brand-lockup{display:flex;flex-direction:row;align-items:center;gap:13px;cursor:pointer;justify-self:start;}
.brand-lockup img{height:44px;width:auto;}
.brand-lockup .wordmark{font-family:var(--head);letter-spacing:.075em;font-size:17px;color:var(--cream);font-weight:500;white-space:nowrap;}

.header-icons{display:flex;gap:18px;align-items:center;justify-content:flex-end;}
.icon-btn{background:none;border:none;color:var(--cream);padding:4px;min-width:44px;min-height:44px;align-items:center;justify-content:center;display:inline-flex;position:relative;}
.icon-btn:hover{color:var(--gold);}
.icon-btn svg{width:21px;height:21px;}
.cart-count{position:absolute;top:-6px;right:-8px;background:var(--garnet);color:var(--cream);font-family:var(--head);font-size:12px;min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;}

/* hero */
.hero{background:var(--navy);color:var(--cream);position:relative;overflow:hidden;}
.hero .botanical{position:absolute;inset:0;opacity:.10;pointer-events:none;}
.hero-botanical{position:absolute;right:-6px;bottom:-26px;width:min(33%,370px);opacity:.6;pointer-events:none;z-index:0;}
.coll-botanical{position:absolute;right:20px;bottom:-34px;width:190px;opacity:.6;pointer-events:none;z-index:0;}
.foot-botanical{position:absolute;right:26px;top:26px;width:150px;opacity:.6;pointer-events:none;z-index:0;}
.hero-inner{max-width:var(--maxw);margin:0 auto;padding:84px 32px 92px;position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center;}
.hero-lock{display:flex;align-items:center;gap:13px;margin-bottom:22px;}
.hero-mark{height:54px;width:auto;}
.hero-lock .wordmark{font-family:var(--head);letter-spacing:.075em;font-size:19px;color:var(--cream);font-weight:500;white-space:nowrap;}
.hero h1{color:var(--cream);font-size:clamp(33px,4.1vw,54px);font-weight:300;letter-spacing:.01em;line-height:1.08;}
.hero .tagline{font-size:clamp(19px,2.1vw,27px);margin:22px 0 14px;}
.hero p.lede{color:#dfe3ef;font-size:18px;max-width:33ch;margin:0 0 32px;}
.hero p.lede-sm{display:none;}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;}
.hero-visual{aspect-ratio:1/1.05;border:1px solid #2a3768;border-radius:4px;background:linear-gradient(160deg,#16224f,#0d1538);display:flex;align-items:center;justify-content:center;position:relative;}
.hero-visual .hv-card{text-align:center;padding:30px;}
.hero-visual svg.jewel{width:min(72%,330px);height:auto;margin:0 auto;}
.hero-visual .hv-cap{font-family:var(--body);font-style:italic;color:var(--gold);margin-top:18px;font-size:16px;}
.hero-photo-bg{position:relative;min-height:clamp(440px,58vh,560px);overflow:hidden;background:#0F1944;display:flex;align-items:center;}
.hero-bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block;z-index:0;}
.hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(to right,rgba(15,25,68,.96) 0%,rgba(15,25,68,.92) 22%,rgba(15,25,68,.74) 38%,rgba(15,25,68,.34) 54%,rgba(15,25,68,0) 68%);}
.hero-pin{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:56px 44px;display:flex;justify-content:flex-start;}
.hero-copy{width:min(508px,54%);text-shadow:0 1px 2px rgba(8,14,38,.55),0 2px 24px rgba(8,14,38,.42);}

/* section scaffolding */
section{padding:78px 0;}
.section-head{text-align:center;max-width:640px;margin:0 auto 46px;}
.section-head .eyebrow{display:block;margin-bottom:14px;}
.section-head h1,.section-head h2{font-size:clamp(28px,3.2vw,40px);font-weight:300;}
.section-head p{color:#5c6070;margin-top:14px;}
.rule{width:46px;height:2px;background:var(--gold);border:none;margin:16px auto 0;}

/* ranges grid */
.ranges{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;grid-auto-rows:1fr;}
.range-card{position:relative;border-radius:4px;overflow:hidden;cursor:pointer;border:1px solid var(--line);background:var(--white);transition:.3s;display:flex;flex-direction:column;height:100%;}
.range-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(15,25,68,.12);}
.range-media{aspect-ratio:4/3.2;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(165deg,#f7f4ec,#ece4d2);}
.range-media.dark{background:linear-gradient(165deg,#16224f,#0e1639);}
.range-media.garnet{background:linear-gradient(165deg,#5a0707,#360000);}
.range-media svg{width:54%;height:auto;}
.range-body{padding:22px 24px 26px;flex:1;display:flex;flex-direction:column;}
.range-body h2{font-size:23px;}
.range-body p{font-size:16.5px;color:#5c6070;margin:8px 0 14px;}
.range-link{font-family:var(--head);text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--gold-deep);display:inline-flex;gap:7px;align-items:center;margin-top:auto;align-self:flex-start;}

/* home: compact collection tiles (five across) */
/* Six ranges, so three and three: five and one left a single tile stranded on its own row. */
.ctiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:900px;margin-left:auto;margin-right:auto;}
.ctile{position:relative;background:var(--white);border:1px solid var(--line);border-radius:4px;overflow:hidden;cursor:pointer;transition:.25s;box-shadow:0 1px 2px rgba(15,25,68,.05);display:flex;flex-direction:column;}
.ctile:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 16px 32px rgba(15,25,68,.12);}
.ct-media{position:relative;aspect-ratio:1/1;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(165deg,#f7f4ec,#ece4d2);}
.ct-media.dark{background:linear-gradient(165deg,#16224f,#0e1639);}
.ct-media img{transition:transform .5s ease;}
/* Three of the five collection photos were shot on a grey studio ground
   (#e6e6e7 to #ecEAef); the paw print and the locket were shot on white, so
   they filled the tile edge to edge and lost the split the others have.
   Multiplying those two onto a matching grey turns their white ground
   transparent, so all five sit on the same tone. Placed after .dark so it
   wins for the memorial tile. */
.ct-media.onwhite{background:var(--photo-bg,#EEEEF0);}
.ct-media.onwhite img.rimg{mix-blend-mode:multiply;}
.ctile:hover .ct-media img{transform:scale(1.05);}
.ct-media svg{width:66%;height:auto;}
.ct-body{padding:15px 12px 17px;text-align:center;flex:1;}
.ct-body h3{font-family:var(--head);font-size:15.5px;font-weight:400;line-height:1.25;margin:0;color:var(--navy);}
.ct-body p{font-size:13px;color:#5c6070;line-height:1.45;margin:6px 0 0;}
@media(max-width:1240px){.ctiles{grid-template-columns:repeat(3,1fr);}}
@media(max-width:768px){.ctiles{grid-template-columns:repeat(2,1fr);gap:12px;}.ct-body{padding:12px 9px 14px;}.ct-body h3{font-size:14px;}.ct-body p{font-size:12px;}}

/* home: how it works as four clean cards */
.hiw.hiw-cards{gap:22px;}
.hiw.hiw-cards::before{display:none;}
.hiw-cards .hiw-step{text-align:left;padding:26px 24px 28px;background:var(--white);border:1px solid var(--line);border-radius:4px;box-shadow:0 1px 2px rgba(15,25,68,.05);transition:.25s;display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:0;align-content:start;}
.hiw-cards .hiw-step:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 16px 32px rgba(15,25,68,.10);}
.hiw-cards .hiw-txt{display:contents;}
.hiw-cards .hiw-ico{width:50px;height:50px;margin:0;grid-column:1;grid-row:1/span 2;align-self:center;box-shadow:0 4px 12px rgba(169,143,79,.16);}
.hiw-cards .hiw-ico svg{width:23px;height:23px;}
.hiw-cards .hiw-overline{grid-column:2;grid-row:1;align-self:end;margin:0 0 3px;font-size:12px;letter-spacing:.2em;}
.hiw-cards .hiw-txt h4{grid-column:2;grid-row:2;align-self:start;margin:0;font-size:18px;line-height:1.2;}
.hiw-cards .hiw-txt p{grid-column:1/-1;grid-row:3;max-width:none;margin:15px 0 0;font-size:16px;}
@media(max-width:1000px){.hiw.hiw-cards{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.hiw.hiw-cards{grid-template-columns:1fr;}.hiw.hiw-cards .hiw-step{padding:22px 20px 24px;}.hiw.hiw-cards .hiw-step::after{display:none;}}

/* home: how it adds up */
.addsup{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.au-card{background:var(--white);border:1px solid var(--line);border-radius:4px;overflow:hidden;cursor:pointer;transition:.25s;box-shadow:0 1px 2px rgba(15,25,68,.05);display:flex;flex-direction:column;}
.au-card:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 18px 36px rgba(15,25,68,.12);}
.au-media{aspect-ratio:4/3;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#fff;}
/* The pieces are shown on white with their shadow around them, so the picture is fitted inside
   the frame rather than filled to its edges, which was cutting the shadow off. Since 2 September
   the three are drawn from the Studio's own artwork at four to three, so they fill the frame
   rather than sitting in it with a white margin either side. */
.au-media img{width:100%;height:100%;object-fit:contain;padding:14px;box-sizing:border-box;display:block;transition:transform .55s ease;}
.au-card:hover .au-media img{transform:scale(1.04);}
.au-body{padding:24px 24px 26px;flex:1;display:flex;flex-direction:column;}
.au-body h3{font-size:21px;font-weight:400;margin:0 0 8px;}
.au-body p{font-size:16px;color:#5c6070;line-height:1.6;margin:0 0 16px;}
.au-count{display:inline-flex;align-items:center;gap:6px;font-family:var(--head);text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:var(--gold-deep);margin-bottom:9px;}
.au-count i{width:6px;height:6px;border-radius:50%;background:var(--gold);display:inline-block;font-style:normal;}
.au-body p:last-child{margin-bottom:0;}
.au-note{position:relative;text-align:center;max-width:700px;margin:48px auto 0;padding-top:34px;font-size:20.5px;color:var(--navy);line-height:1.6;}
.au-note::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:46px;height:2px;background:var(--gold);}
.au-note span{display:block;margin-top:9px;font-size:17.5px;color:#5c6070;}
@media(max-width:1000px){.addsup{grid-template-columns:1fr;max-width:460px;margin:0 auto;}}
@media(max-width:600px){
  /* list view: image left, text right, so all three steps read as one sequence */
  .addsup{max-width:none;gap:12px;}
  .au-card{flex-direction:row;align-items:stretch;}
  .au-media{flex:0 0 38%;aspect-ratio:auto;min-height:134px;}
  .au-body{padding:15px 16px 16px;justify-content:center;}
  .au-count{font-size:12px;letter-spacing:.18em;margin-bottom:7px;}
  .au-body h3{font-size:19px;line-height:1.15;margin:0 0 6px;}
  .au-body p{font-size:15px;line-height:1.5;margin:0;}
}
@media(max-width:768px){.au-note{font-size:18.5px;padding-top:28px;margin-top:38px;}.au-note span{font-size:16px;}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.step{text-align:center;padding:10px;}
.step .num{font-family:var(--head);font-size:40px;color:var(--gold);font-weight:300;line-height:1;}
.step h4{margin:14px 0 8px;font-size:18px;}
.step p{font-size:16px;color:#5c6070;margin:0;}
/* How It Works,connected step journey */
.hiw{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.hiw::before{content:"";position:absolute;top:34px;left:12.5%;right:12.5%;height:2px;background:var(--gold);opacity:.45;z-index:0;}
.hiw-step{position:relative;text-align:center;padding:0 8px;}
.hiw-ico{position:relative;z-index:1;width:68px;height:68px;margin:0 auto 20px;border-radius:50%;background:var(--white);border:1.5px solid var(--gold);display:flex;align-items:center;justify-content:center;color:var(--gold-deep);box-shadow:0 6px 18px rgba(169,143,79,.18);}
.hiw-ico svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
.hiw-overline{display:block;font-family:var(--head);text-transform:uppercase;letter-spacing:.22em;font-size:12px;color:var(--gold-deep);margin-bottom:9px;}
.hiw-txt h4{font-size:19px;font-weight:400;margin:0 0 9px;}
.hiw-txt p{font-size:16.5px;color:#5c6070;line-height:1.62;margin:0 auto;max-width:250px;}
.hiw.hiw-5{grid-template-columns:repeat(5,1fr);}
.hiw.hiw-5::before{left:10%;right:10%;}
/* collection card: at-a-glance metals + customisation */
.coll-assurance{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;width:fit-content;max-width:100%;margin:22px auto 4px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 22px;box-shadow:0 3px 12px rgba(15,25,68,.05);}
.coll-assurance .ca-swatches{display:inline-flex;gap:7px;flex-shrink:0;}
.coll-assurance .ca-sw{width:19px;height:19px;border-radius:50%;position:relative;box-shadow:0 1px 2px rgba(15,25,68,.25),inset 0 0 0 1px rgba(255,255,255,.35);}
.coll-assurance .ca-sw::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 2px 3px rgba(255,255,255,.55),inset 0 -2px 3px rgba(0,0,0,.14);}
/* Silver leans blue-grey (#E2E5E6); platinum is the warmer, softer grey (#E5E3E0). */
.coll-assurance .ca-sw.silver{background:radial-gradient(120% 120% at 30% 25%,#ffffff,#c7cdd1 55%,#949ca3);}
.coll-assurance .ca-sw.platinum{background:radial-gradient(120% 120% at 30% 25%,#fbfaf8,#cfcac3 55%,#a19b93);}
.coll-assurance .ca-sw.gold{background:radial-gradient(120% 120% at 30% 25%,#f6e6b4,#d8b968 52%,#a9833f);}
.coll-assurance .ca-sw.rose{background:radial-gradient(120% 120% at 30% 25%,#f8ddd0,#e0a892 52%,#bd7d66);}
.coll-assurance .ca-text{font-family:var(--body);font-size:14.5px;color:#5c6070;line-height:1.5;}
.coll-assurance .ca-text b{font-style:normal;font-weight:500;color:var(--gold-deep);}
/* Small, quiet, and unmistakably a button. It sits inside a reassurance line
   rather than at the end of a section, so it should not shout — but it must
   not look like the bold text it replaced either. */
.coll-assurance .ca-btn{font-family:var(--head);font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-deep);background:transparent;cursor:pointer;
  border:1px solid var(--gold);border-radius:999px;padding:8px 16px;flex-shrink:0;
  transition:background .18s,color .18s;min-height:38px;}
.coll-assurance .ca-btn:hover{background:var(--gold);color:#fff;}
.coll-assurance .ca-btn:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px;}
.collections-foot{text-align:center;margin-top:36px;}
.collections-foot .coll-assurance{margin:0 auto;}
.collections-link{display:inline-block;font-family:var(--head);text-transform:uppercase;letter-spacing:.16em;font-size:15px;color:var(--gold-deep);border-bottom:1px solid rgba(169,143,79,.4);padding-bottom:4px;transition:color .2s,border-color .2s;}
.collections-link:hover{color:var(--navy);border-color:var(--navy);}

/* story split */
.story{background:var(--navy);color:var(--cream);}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
/* The contact page: details beside the form on a wide screen, the form under them on a phone,
   where two columns squeezed the form off the right-hand edge. */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start;}
.contact-grid p{overflow-wrap:anywhere;}
.contact-grid a{color:inherit;}
.field textarea{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:2px;font-family:var(--body);font-size:16px;background:var(--white);color:var(--ink);resize:vertical;min-height:120px;}
@media(max-width:768px){.contact-grid{grid-template-columns:1fr;gap:28px;}}
.story .eyebrow{color:var(--gold);}
.story h2{color:var(--cream);font-weight:300;font-size:clamp(26px,3vw,38px);margin:14px 0 18px;}
.story .quote{font-family:var(--body);font-style:italic;font-size:22px;color:var(--gold);line-height:1.5;margin-bottom:20px;}
.story p{color:#c7cce0;font-size:19px;}
.story-visual{aspect-ratio:1/1;border-radius:4px;background:linear-gradient(160deg,#16224f,#0d1538);border:1px solid #2a3768;display:flex;align-items:center;justify-content:center;}
.story-visual svg{width:60%;}

/* values / trust */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;text-align:center;}
.trust .ti svg{width:34px;height:34px;margin:0 auto 14px;color:var(--gold-deep);}
.trust .ti h4{font-size:18px;margin-bottom:7px;}
.trust .ti p{font-size:15.5px;color:#5c6070;margin:0;text-wrap:balance;}
/* Each line of copy sits on two lines on a desktop: a touch wider and a touch smaller than body text. */
@media (min-width:1100px){.trust{gap:22px}.trust .ti p{font-size:15px}}

/* product grid */
.crumb{font-family:var(--head);text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:#64685B;margin-bottom:18px;}
/* The trail above each page title (Home · Collections · All pieces) is not shown: Sanay, 21 Sep 2026.
   Search engines still get it, from the breadcrumb data written into each page. */
.crumb{display:none!important}
.crumb a:hover{color:var(--gold-deep);}
.collection-hero{background:var(--cream-2);border-bottom:1px solid var(--line);padding:54px 0;text-align:center;position:relative;overflow:hidden;}
.collection-hero .wrap{position:relative;z-index:1;}
.collection-hero h1{font-size:clamp(30px,3.6vw,46px);font-weight:300;}
.collection-hero p{color:#5c6070;max-width:800px;margin:14px auto 0;}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin:26px 0 32px;flex-wrap:wrap;gap:20px;}
.toolbar .count{font-size:14px;color:#5c6070;font-style:italic;}
.filters{display:flex;gap:8px;flex-wrap:wrap;}
/* On a phone the five collections took five lines and pushed every piece below the fold.
   They now sit on one line that slides sideways, with the chosen one brought into view and
   the next one half showing at the edge, which is what says there is more to the right. */
@media(max-width:768px){
  .toolbar{margin:16px 0 24px;gap:18px}
  .filters{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:0 -18px;padding:2px 40px 2px 18px;width:calc(100% + 36px)}
  .filters::-webkit-scrollbar{display:none}
  .filters .chip{flex:0 0 auto;scroll-snap-align:start}
}
.chip{font-family:var(--head);text-transform:uppercase;letter-spacing:.12em;font-size:12px;padding:8px 15px;border:1px solid var(--line);border-radius:20px;color:var(--navy);background:var(--white);transition:.2s;}
.chip:hover{border-color:var(--gold);}
.chip.active{background:var(--navy);color:var(--cream);border-color:var(--navy);}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 26px;}
/* Wide screens: one more piece per row, rather than three very large cards. */
@media(min-width:1500px){.grid,.blog-grid,.reviews-grid{grid-template-columns:repeat(4,1fr);}.ctiles{max-width:1100px;}}
/* The results on a collection page sit close under the heading band, and the cards sit
   close to one another, so the row of pieces reads as one block rather than as a page of
   separate tiles. */
section.coll-results{padding-top:15px}
/* the memorial band is garnet, so everything on it is set for a dark ground */
.collection-hero.hero-dark .crumb{color:#E7C9C9}
/* the links are underlined rather than just a different colour, so they are still links
   to someone who cannot tell the two apart */
.collection-hero.hero-dark .crumb a{color:#F6F3EA;text-decoration:underline;text-underline-offset:3px}
.collection-hero.hero-dark .crumb a:hover{color:var(--gold)}
section.coll-results .grid{gap:5px}
@media(max-width:768px){
  section.coll-results{padding-top:0}
}
.coll-group{margin-bottom:46px}
.coll-group:last-child{margin-bottom:0}
.coll-group-h{font-family:var(--head);font-weight:300;font-size:24px;color:var(--navy);letter-spacing:.02em;margin:8px 0 20px;padding-bottom:12px;border-bottom:1px solid var(--gold);}
.card{background:var(--white);border:1px solid var(--line);border-radius:4px;overflow:hidden;transition:.28s;display:flex;flex-direction:column;}
.card:hover{box-shadow:0 18px 36px rgba(15,25,68,.1);transform:translateY(-3px);}
.card .media{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;cursor:pointer;background:linear-gradient(165deg,#faf8f2,#efe8d8);position:relative;}
.card .media.dark{background:linear-gradient(165deg,#16224f,#0e1639);}
.card .media svg.jewel{width:74%;height:auto;}
.card .tag-pill{position:absolute;top:12px;left:12px;font-family:var(--head);font-size:12px;letter-spacing:.14em;text-transform:uppercase;background:rgba(74,0,0,.92);color:var(--cream);padding:5px 10px;border-radius:2px;}
.card .info{padding:18px 20px 22px;display:flex;flex-direction:column;gap:9px;flex:1;}
.card .info .pcol{font-family:var(--head);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#64685B;}
.card .info h2{font-size:18px;cursor:pointer;}
.card .info h2:hover{color:var(--gold-deep);}
.card .price{font-family:var(--head);color:var(--navy);font-size:16px;letter-spacing:.02em;margin-top:auto;}
.card .price .from{font-size:12px;color:#64685B;letter-spacing:.1em;text-transform:uppercase;}
.swatches{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.swatch{width:22px;height:22px;border-radius:50%;border:1.5px solid #d8d2c0;cursor:pointer;padding:0;transition:.15s;position:relative;}
.swatch:hover{transform:scale(1.12);}
.swatch.active{border-color:var(--navy);box-shadow:0 0 0 2px var(--cream),0 0 0 3.5px var(--navy);}
.cmatname{font-family:var(--head);text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--gold-deep);min-height:13px;}

/* product detail */
.pd{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;padding-top:30px;align-items:start;}
.pd>*{min-width:0;}
.pd-media{position:sticky;top:120px;}
.pd-stage{aspect-ratio:1/1;border:1px solid var(--line);border-radius:4px;display:flex;align-items:center;justify-content:center;background:linear-gradient(165deg,#faf8f2,#ece4d2);}
.pd-stage.dark{background:linear-gradient(165deg,#16224f,#0e1639);}
.pd-stage svg.jewel{width:72%;height:auto;}
.pd-thumbs{display:flex;gap:12px;margin-top:14px;}
.pd-thumb{width:74px;height:74px;border:1px solid var(--line);border-radius:3px;display:flex;align-items:center;justify-content:center;background:#faf8f2;cursor:pointer;}
.pd-thumb.dark{background:#16224f;}
.pd-thumb svg{width:74%;}
.pd-info .pcol{font-family:var(--head);text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--gold-deep);margin-bottom:10px;}
.pd-info h1{font-size:clamp(28px,3.2vw,40px);font-weight:300;line-height:1.1;}
.pd-price{font-family:var(--head);font-size:26px;color:var(--navy);margin:18px 0;}
/* Whether a price includes VAT. Said beside the amount, in the smaller, quieter type every
   shop uses for it, so it reads as a note on the number rather than as part of it. */
.vat{font-family:var(--body);font-size:12.5px;font-weight:400;letter-spacing:0;
  text-transform:none;color:#64685B;white-space:nowrap;margin-left:6px;}
.pd-desc{color:#4a4f5e;margin-bottom:26px;}
.opt-label{font-family:var(--head);text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--navy);margin-bottom:12px;display:flex;gap:10px;}
.opt-label span{color:#64685B;font-weight:400;}
/* The chain length or bracelet size on a product page. It sits under the metal and reads as
   part of the same group of choices. */
.pd-sizing{display:block;width:100%;max-width:340px;min-height:44px;padding:10px 12px;margin-top:6px;
  font-family:var(--body);font-size:16px;color:var(--ink);background:var(--white);
  border:1.5px solid var(--line);border-radius:8px;}
.pd-sizing:focus-visible{outline:2px solid var(--navy);outline-offset:2px;}
.pd-sizing-note{display:block;margin-top:7px;max-width:52ch;font-size:14px;line-height:1.5;color:var(--muted);}
/* Two by two (Sanay, 1 Oct 2026): silver beside 9ct yellow gold, rose gold beside platinum,
   so the four read as a set rather than a ragged row that wraps differently on every phone. */
.material-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:26px;max-width:520px;}
.material-opts .matopt{justify-content:flex-start;min-width:0;}
@media (max-width:480px){.material-opts{gap:8px}.material-opts .matopt{padding:8px 10px 8px 8px;gap:7px}.material-opts .matopt span{font-size:11px;letter-spacing:.04em;line-height:1.25}}
.matopt{display:flex;align-items:center;gap:9px;border:1px solid var(--line);padding:8px 14px 8px 9px;border-radius:30px;cursor:pointer;transition:.2s;background:var(--white);}
.matopt:hover{border-color:var(--gold);}
.matopt.active{border-color:var(--navy);background:var(--cream);}
.matopt .sw{width:20px;height:20px;border-radius:50%;border:1px solid #d8d2c0;}
.matopt span{font-family:var(--head);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);}
.qtyrow{display:flex;gap:16px;align-items:stretch;margin-bottom:18px;}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:2px;}
.qty button{width:42px;font-size:18px;color:var(--navy);}
.qty input{width:42px;text-align:center;border:none;font-family:var(--head);font-size:15px;background:none;color:var(--navy);}
.pd-meta{margin-top:30px;border-top:1px solid var(--line);}
.acc{border-bottom:1px solid var(--line);}
.acc summary{list-style:none;cursor:pointer;padding:16px 2px;font-family:var(--head);text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--navy);display:flex;justify-content:space-between;align-items:center;}
.acc summary::-webkit-details-marker{display:none;}
.acc summary::after{content:'+';font-size:18px;color:var(--gold-deep);}
.acc[open] summary::after{content:'–';}
.acc .acc-body{padding:0 2px 18px;font-size:16px;color:#4a4f5e;}
.engrave-note{background:var(--cream-2);border-left:3px solid var(--gold);padding:14px 16px;font-size:15.5px;color:#4a4f5e;margin-bottom:24px;}

/* related */
.related{margin-top:70px;}
/* "How it adds up" on a product page: the same point as the homepage makes, at about half the
   height, with the piece shown large enough to read and everything centred under it. */
.pd-adds{padding:56px 0;background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pda-head{margin-bottom:26px;text-align:center}
.pda-head .eyebrow{color:var(--gold-deep)}
.pda-head h2{font-family:var(--head);font-weight:300;font-size:26px;color:var(--navy);margin:10px 0 10px}
.pda-head p{font-size:15px;line-height:1.7;color:#5c6070;margin:0 auto;max-width:74ch}
.pda-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pda-item{display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px 20px}
.pda-media{width:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;margin-bottom:12px;overflow:hidden}
/* Fitted to the frame rather than left at its own size, which was overflowing the frame and
   showing the piece far larger than the card was drawn for. */
.pda-media img{width:100%;height:100%;object-fit:contain}
.pda-item b{display:block;font-size:16px;font-weight:600;color:var(--navy);line-height:1.3}
.pda-item small{display:block;font-size:13.5px;color:#64685B;line-height:1.55;margin-top:5px}
.pda-foot{margin-top:24px;text-align:center}
.pda-foot p{font-size:14.5px;line-height:1.65;color:#5c6070;margin:0 auto 14px;max-width:56ch}
/* One card per row on a phone, so the frame is as wide as the screen. The piece is shown at
   half that width and the frame closes up around it rather than holding a fixed shape. */
@media(max-width:768px){.pda-row{grid-template-columns:1fr}.pd-adds{padding:40px 0}
  .pda-media{aspect-ratio:auto;margin-bottom:10px}
  .pda-media img{width:50%;height:auto}}

/* cart drawer */
.overlay{position:fixed;inset:0;background:rgba(15,25,68,.42);opacity:0;visibility:hidden;transition:.3s;z-index:90;}
.overlay.show{opacity:1;visibility:visible;}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(440px,92vw);background:var(--cream);z-index:100;transform:translateX(100%);transition:.32s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:-20px 0 50px rgba(15,25,68,.2);}
.drawer.show{transform:translateX(0);box-shadow:-20px 0 50px rgba(15,25,68,.2);}
/* No shadow while it is closed: off-screen, it still cast one onto the right edge of every page (4 Oct 2026). */
.drawer:not(.show){box-shadow:none;}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:22px 26px;border-bottom:1px solid var(--line);}
.drawer-head h2{font-family:var(--head);text-transform:uppercase;letter-spacing:.18em;font-size:15px;}
.drawer-items{flex:1;overflow-y:auto;padding:8px 26px;}
.citem{display:grid;grid-template-columns:74px 1fr auto;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);align-items:start;}
.citem .cthumb{width:74px;height:74px;border:1px solid var(--line);border-radius:3px;display:flex;align-items:center;justify-content:center;background:#faf8f2;}
.citem .cthumb.dark{background:#16224f;}
.citem .cthumb svg{width:78%;}
.citem h4,.citem .citem-name{font-family:var(--head);font-size:15px;font-weight:500;letter-spacing:.02em;color:var(--navy);text-transform:none;}
.citem .cmat{font-size:12.5px;color:#64685B;margin:3px 0 8px;}
.citem .cqty{display:inline-flex;border:1px solid var(--line);border-radius:2px;}
.citem .cqty button{width:28px;height:26px;font-size:14px;color:var(--navy);}
.citem .cqty span{min-width:26px;text-align:center;font-family:var(--head);font-size:13px;line-height:26px;}
.citem .cprice{font-family:var(--head);font-size:14px;color:var(--navy);text-align:right;}
.citem .cremove{font-family:var(--body);font-size:12px;color:#64685B;text-decoration:underline;background:none;margin-top:8px;text-align:left;padding:0;}
.citem .cremove:hover{color:var(--garnet);}
.drawer-empty{text-align:center;padding:60px 26px;color:#64685B;}
.drawer-empty svg{width:50px;margin:0 auto 18px;color:var(--gold);}
.drawer-foot{border-top:1px solid var(--line);padding:22px 26px;background:var(--white);}
.drawer-foot .subtotal{display:flex;justify-content:space-between;font-family:var(--head);text-transform:uppercase;letter-spacing:.1em;font-size:14px;color:var(--navy);margin-bottom:4px;}
.drawer-foot .ship{font-size:12.5px;color:#64685B;margin-bottom:16px;font-style:italic;}

/* toast */
#toast{position:fixed;top:22px;right:22px;z-index:120;display:flex;flex-direction:column;gap:10px;}
.toastcard{background:var(--navy);color:var(--cream);border-radius:4px;padding:16px 18px;display:flex;gap:13px;align-items:center;min-width:300px;box-shadow:0 16px 40px rgba(15,25,68,.3);border-left:3px solid var(--gold);transform:translateX(120%);animation:slideIn .4s forwards;}
@keyframes slideIn{to{transform:translateX(0);}}
.toastcard.out{animation:slideOut .4s forwards;}
@keyframes slideOut{to{transform:translateX(120%);opacity:0;}}
.toastcard .tthumb{width:42px;height:42px;border-radius:3px;background:#16224f;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.toastcard .tthumb svg{width:80%;}
.toastcard .ttext small{display:block;font-family:var(--head);text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--gold);}
.toastcard .ttext b{font-family:var(--head);font-weight:500;font-size:13px;}

/* search overlay */
.search-panel{position:fixed;top:50%;left:50%;width:min(720px,92vw);max-height:78vh;overflow-y:auto;background:var(--cream);z-index:110;border-radius:6px;box-shadow:0 30px 80px rgba(15,25,68,.32);opacity:0;visibility:hidden;transform:translate(-50%,-48%) scale(.97);transition:.24s ease;}
.search-panel.show{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);}
.search-bar{display:flex;align-items:center;gap:14px;margin:0 auto;padding:26px 28px 12px;}
.search-bar input{flex:1;border:none;border-bottom:1px solid var(--navy);background:none;font-family:var(--head);font-size:20px;letter-spacing:.02em;color:var(--navy);padding:8px 0;}
.search-bar input::placeholder{color:#9a968a;font-style:normal;}
.search-results{margin:0 auto;padding:8px 28px 32px;}
.search-results .rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:16px;}
.search-hint{font-family:var(--head);text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:#64685B;}
.mini{cursor:pointer;}
.mini .media{aspect-ratio:1/1;border:1px solid var(--line);border-radius:3px;display:flex;align-items:center;justify-content:center;background:#faf8f2;margin-bottom:9px;}
.mini .media.dark{background:#16224f;}
.mini .media svg{width:74%;}
.mini h4{font-family:var(--head);font-size:13px;font-weight:500;color:var(--navy);text-transform:none;letter-spacing:.01em;}
.mini .mp{font-family:var(--head);font-size:12.5px;color:#5c6070;}

/* checkout */
.checkout{display:grid;grid-template-columns:1.2fr .8fr;gap:46px;padding-top:30px;align-items:start;}
.field{margin-bottom:16px;}
.field label{font-family:var(--head);text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--navy);display:block;margin-bottom:6px;}
.field input,.field select{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:2px;font-family:var(--body);font-size:16px;background:var(--white);color:var(--ink);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.order-summary{background:var(--white);border:1px solid var(--line);border-radius:4px;padding:26px;position:sticky;top:120px;}
.order-summary h3{font-family:var(--head);text-transform:uppercase;letter-spacing:.14em;font-size:14px;margin-bottom:18px;}
/* The summary folds on a phone and sits above the form. On a wider screen it is the column it
   has always been, always open, and the button that folds it is not drawn at all. */
.os-toggle{display:none;}
.os-body{display:block;}
.osi{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);align-items:center;}
.osi .ot{width:52px;height:52px;border:1px solid var(--line);border-radius:3px;display:flex;align-items:center;justify-content:center;background:#faf8f2;flex-shrink:0;}
.osi .ot.dark{background:#16224f;}
.osi .ot svg{width:78%;}
.osi .oname{font-size:15px;color:var(--navy);flex:1;}
.osi .oname small{display:block;color:#64685B;font-size:12px;}
.osi .op{font-family:var(--head);font-size:15px;color:var(--navy);}
.os-totals{padding-top:14px;}
.os-totals .r{display:flex;justify-content:space-between;font-size:15px;margin:7px 0;color:#4a4f5e;}
.os-totals .r.tot{font-family:var(--head);text-transform:uppercase;letter-spacing:.1em;color:var(--navy);font-size:16px;border-top:1px solid var(--line);padding-top:14px;margin-top:14px;}
.pay-note{font-size:12.5px;color:#64685B;font-style:italic;margin-top:14px;text-align:center;}
.ex-kit-line{margin-top:10px;font-size:14.5px;color:#5c6070;}
.ex-kit-line a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px;cursor:pointer;}

/* the page an order ends on */
.op-head{text-align:center;max-width:640px;margin:0 auto 40px;}
.op-tick{width:56px;height:56px;border-radius:50%;background:#f7f1e2;color:#8a6d33;
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;}
.op-tick svg{width:28px;height:28px;}
.op-head h1{font-weight:300;font-size:34px;margin:10px 0 6px;color:var(--navy);}
.op-no{font-family:var(--head);letter-spacing:.06em;font-size:16px;color:var(--navy);margin:0 0 14px;}
.op-no b{font-weight:600;}
.op-next{color:#4a4f5e;line-height:1.7;margin:0;font-size:15.5px;}
.op-body{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:start;padding-bottom:20px;}
.op-sum{position:static;}
.op-side h3{font-family:var(--head);text-transform:uppercase;letter-spacing:.14em;font-size:14px;margin-bottom:18px;color:var(--navy);}
.op-steps{margin:0 0 24px;padding-left:20px;color:#4a4f5e;line-height:1.7;font-size:15px;}
.op-steps li{margin-bottom:12px;}
.op-steps b{color:var(--navy);font-weight:600;}
.op-acts{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;}
.op-help{font-size:14px;color:#64685B;line-height:1.65;margin:0;}

/* footer */
footer#foot{background:var(--navy);color:#c7cce0;padding:66px 0 30px;margin-top:0px;position:relative;overflow:hidden;border-top:1px solid #c8b273;}
footer#foot .wrap{position:relative;z-index:1;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:46px;border-bottom:1px solid #25315f;}
.foot-brand img{height:64px;margin-bottom:18px;}
.foot-brand .tagline{font-size:16px;display:block;margin-bottom:16px;}
.foot-brand p{font-size:15px;color:#9aa0c0;}
.foot-col h2,.foot-news h2{font-family:var(--head);text-transform:uppercase;letter-spacing:.18em;font-size:14px;color:var(--gold);margin-bottom:16px;}
.foot-col a,.foot-col p{display:block;font-size:15px;color:#c7cce0;margin-bottom:10px;}
.foot-col a:hover{color:var(--gold);}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;flex-wrap:wrap;gap:10px;}
.foot-bottom span{font-family:var(--head);text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:#C6CBDD;}

.fade{animation:fade .5s ease;}
@keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

@media(max-width:1000px){
  .hero-inner{grid-template-columns:1fr;gap:36px;}
  .hero-visual{max-width:420px;}
  .hero-photo-bg{min-height:0;display:block;padding:0;}
  .hero-bg-img{position:relative;inset:auto;width:100%;height:clamp(300px,54vw,460px);object-fit:cover;object-position:center 46%;display:block;}
  .hero-overlay{display:none;}
  .hero-pin{position:static;background:var(--navy);padding:38px 24px 46px;justify-content:flex-start;max-width:none;}
  .hero-copy{width:100%;}
  .ranges,.search-results .rgrid{grid-template-columns:repeat(2,1fr);}
  .steps,.trust{grid-template-columns:repeat(2,1fr);}
  .grid{grid-template-columns:repeat(2,1fr);}
  .story-grid,.pd,.checkout,.op-body,.foot-grid{grid-template-columns:1fr;}
  .pd-media,.order-summary{position:static;}
  /* The order summary comes above the form, so nobody is asked to pay before they have seen
     what for. It arrives folded, because the form is what they came here to fill in. */
  .order-summary{order:-1;padding:0;border-radius:8px;overflow:hidden;margin-bottom:4px;}
  .order-summary.op-sum,.order-summary.tco-sum{padding:20px 18px;}
  .order-summary .os-head{display:none;}
  .order-summary .os-toggle{display:flex;width:100%;align-items:center;gap:12px;
    background:var(--cream-2);border:0;border-bottom:1px solid var(--line);
    padding:15px 18px;min-height:56px;cursor:pointer;text-align:left;}
  .order-summary .os-toggle-t{flex:1;font-family:var(--head);text-transform:uppercase;
    letter-spacing:.14em;font-size:13px;color:var(--navy);}
  .order-summary .os-toggle-p{font-family:var(--head);font-size:17px;color:var(--navy);}
  .order-summary .os-toggle-c{flex:0 0 18px;text-align:center;font-family:var(--head);
    font-size:19px;line-height:1;color:var(--gold-deep);}
  .order-summary .os-body{display:none;padding:18px 18px 22px;}
  .order-summary.os-open .os-toggle{border-bottom-color:var(--line);}
  .order-summary.os-open .os-body{display:block;}
  nav.primary{display:none;}
  .header-grid{grid-template-columns:auto 1fr auto;}
  .hamburger{display:inline-flex;}
  .brand-lockup{justify-self:center;}
  .trade-link{display:none;}
}
@media(max-width:600px){
  .grid,.search-results .rgrid,.steps,.trust{grid-template-columns:1fr 1fr;}
  /* collections: single-column horizontal cards (image left, text right) */
  .ranges{grid-template-columns:1fr;gap:14px;grid-auto-rows:auto;}
  .ranges .range-card{flex-direction:row;align-items:stretch;}
  .ranges .range-media{flex:0 0 40%;aspect-ratio:auto;min-height:128px;}
  .ranges .range-media svg{width:68%;}
  .ranges .range-body{padding:14px 16px;}
  .ranges .range-body h3{font-size:20px;line-height:1.15;}
  .ranges .range-body p{font-size:15px;line-height:1.5;margin:6px 0 10px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
  .ranges .range-link{font-size:12px;}
  .wrap{padding:0 18px;}
  .header-grid{padding:12px 18px;}
  /* --- compact mobile hero: clean photo band above a solid navy copy block --- */
  #announce .wrap{padding:6px 16px;letter-spacing:.1em;font-size:12px;line-height:1.5;}
  .hero-photo-bg{position:relative;}
  .hero-bg-img{position:relative;inset:auto;width:100%;height:clamp(196px,52vw,252px);object-fit:cover;object-position:center 36%;display:block;}
  .hero-overlay{display:none;}
  .hero-pin{position:relative;background:var(--navy);padding:32px 22px 38px;}
  .hero-copy{text-shadow:none;}
  .hero-lock{margin-bottom:14px;}
  .hero-lock .wordmark{font-size:16px;letter-spacing:.075em;}
  .hero-mark{height:44px;}
  .hero h1{font-size:29px;line-height:1.1;}
  .hero .tagline{font-size:17px;margin:12px 0 9px;}
  .hero p.lede{display:none;}
  .hero p.lede-sm{display:block;font-size:15.5px;max-width:34ch;margin:0 0 20px;}
  .hero-trust{margin-top:16px;font-size:12.5px;}
  .hero-trust .ht-tail{display:none;}
  /* How It Works: vertical timeline on mobile */
  .hiw{grid-template-columns:1fr;gap:0;}
  .hiw::before{display:none;}
  .hiw-step{display:grid;grid-template-columns:auto 1fr;gap:16px;text-align:left;padding:0 0 26px;}
  .hiw-step:last-child{padding-bottom:0;}
  .hiw-step:not(:last-child)::after{content:"";position:absolute;left:27px;top:62px;bottom:2px;width:2px;background:var(--gold);opacity:.4;}
  .hiw-ico{width:56px;height:56px;margin:0;}
  .hiw-ico svg{width:26px;height:26px;}
  .hiw-txt{padding-top:5px;}
  .hiw-txt p{max-width:none;margin:0;}
}
/* The backdrop every product photograph is finished to. Every frame a photograph sits in
   takes the same colour, so a 4:3 picture in a square frame has no visible edge: it used to
   sit on white, and read as a grey box floating in the card. */
:root{--photo-bg:#EEEEF0;}
img.pimg{width:100%;height:100%;object-fit:contain;padding:7%;}
img.pimg.fill{object-fit:cover;padding:0;}
img.rimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.card .media,.card .media.dark{background:var(--photo-bg);}
.pd-stage,.pd-stage.dark{background:var(--photo-bg);}
.pd-thumb,.pd-thumb.dark{background:var(--photo-bg);}
.citem .cthumb,.citem .cthumb.dark{background:var(--photo-bg);}
.osi .ot,.osi .ot.dark{background:var(--photo-bg);}
.mini .media,.mini .media.dark{background:var(--photo-bg);}
.toastcard .tthumb{background:var(--photo-bg);}
.range-media,.range-media.dark,.range-media.garnet{background:var(--photo-bg);}
.hero-visual{overflow:hidden;padding:0;}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.hv-cap-overlay{position:absolute;left:0;right:0;bottom:0;padding:34px 24px 18px;font-family:var(--body);font-style:italic;color:var(--cream);font-size:16px;background:linear-gradient(to top,rgba(15,25,68,.9),rgba(15,25,68,0));z-index:1;}
.story-visual{overflow:hidden;}
.story-photo{width:100%;height:100%;object-fit:cover;}
#persoDrawer{width:min(540px,96vw);}
.perso-ctx{font-family:var(--body);font-size:12.5px;color:#64685B;margin-top:3px;}
.pgroup{margin-bottom:6px;}
.pgroup-h{font-family:var(--head);text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--gold-deep);margin:20px 0 12px;}
.pfield{margin-bottom:14px;}
.pfield label{display:block;font-family:var(--head);text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:var(--navy);margin-bottom:6px;}
.pfield select,.pfield input,.pfield textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:2px;font-family:var(--body);font-size:16px;background:#fff;color:var(--ink);}
.pfield small{display:block;color:#64685B;font-size:12px;margin-top:5px;font-style:italic;line-height:1.45;}
.perso-care{background:var(--cream-2);border-left:3px solid var(--gold);padding:13px 15px;font-size:14.5px;color:#4a4f5e;margin:8px 0 6px;}
.pfield input[type=file]{padding:9px 12px;background:var(--cream-2);cursor:pointer;font-size:16px;}
.pfield input[type=file]::file-selector-button{font-family:var(--head);text-transform:uppercase;letter-spacing:.1em;font-size:12px;padding:8px 14px;margin-right:12px;border:1px solid var(--navy);background:var(--navy);color:var(--cream);border-radius:2px;cursor:pointer;}
.pfield input[type=file]::file-selector-button:hover{background:var(--gold);color:var(--navy);border-color:var(--gold);}
.pf-uploaded{display:block;color:var(--gold-deep);font-size:12.5px;margin-top:6px;font-style:normal;}
.perso-foot-note{text-align:center;font-size:12px;color:#64685B;font-style:italic;margin-top:10px;}
.cperso{font-size:12px;color:#64685B;line-height:1.4;margin:2px 0 8px;}
.operso{display:block;color:#64685B;font-size:12px;margin-top:3px;}
.pd-rating{display:flex;gap:9px;align-items:center;margin:8px 0 2px;font-size:14.5px;color:#5c6070;}
.pd-rating .stars{color:var(--gold);letter-spacing:2px;}
.pd-reassure{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:9px;}
.pd-reassure li{position:relative;padding-left:26px;font-size:15px;color:#4a4f5e;line-height:1.45;}
.pd-reassure li::before{content:'✓';position:absolute;left:0;top:0;color:var(--gold-deep);font-weight:600;}
.hero-trust{margin-top:24px;display:flex;align-items:center;gap:11px;color:#c7cce0;font-size:13.5px;}
.hero-trust .stars{color:var(--gold);letter-spacing:2px;}
.trustbar{background:var(--navy);color:var(--cream);border-top:1px solid #25315f;}
.trustbar .wrap{display:flex;justify-content:center;gap:38px;flex-wrap:wrap;padding:15px 32px;}
.trustbar span{font-family:var(--head);text-transform:uppercase;letter-spacing:.14em;font-size:12px;display:flex;align-items:center;gap:8px;color:#d3d8ea;}
.trustbar span b{color:var(--gold);font-size:12px;}
.testimonials{background:var(--cream-2);}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.tcard{background:#fff;border:1px solid var(--line);border-radius:4px;padding:28px 26px;display:flex;flex-direction:column;gap:14px;}
.tcard .stars{color:var(--gold);letter-spacing:2px;font-size:15px;}
.tcard blockquote{margin:0;font-family:var(--body);font-style:italic;font-size:16.5px;color:var(--navy);line-height:1.55;}
.tcard .tattr{font-family:var(--head);text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:#64685B;margin-top:auto;}
.faq{max-width:760px;margin:0 auto;}
.faq .acc summary{font-family:var(--body);text-transform:none;letter-spacing:0;font-size:19px;color:var(--navy);padding:18px 2px;}
.faq .acc .acc-body{font-size:17px;padding-top:2px;}
.cta-band{background:var(--navy);color:var(--cream);text-align:center;}
.cta-band h2{color:var(--cream);font-weight:300;font-size:clamp(26px,3vw,38px);}
.cta-band .tagline,.cta-band p{color:#c7cce0;max-width:560px;margin:14px auto 26px;}
/* ---- the trade order form ---- */
/* ---- The trade checkout's own quiet chrome ------------------------------------------
   The shop's header and footer come off, and these two take their place: the mark, who the
   order is being placed as, and one way back. */
body.is-trade-checkout #announce{display:none;}
body.is-trade-checkout #site{display:none;}
body.is-trade-checkout #foot{display:none;}
body.is-trade-checkout #app{padding-top:0;}
/* ---- The customer's checkout, the same way -------------------------------------------------
   Somebody part way through paying does not need Shop, Extras and Guides above them, or the
   whole footer below. The shop's header and footer come off and these take their place: the mark,
   which goes home, and one line with the two things somebody at a checkout actually reaches for. */
body.is-checkout #announce{display:none;}
body.is-checkout #site{display:none;}
body.is-checkout #foot{display:none;}
body.is-checkout #app{padding-top:0;}
.co-bar{background:var(--navy);color:#fff;}
.co-bar-in{max-width:var(--maxw);margin:0 auto;padding:15px 24px;display:flex;align-items:center;gap:18px;}
.co-mark{display:inline-flex;align-items:center;gap:11px;color:#fff;text-decoration:none;margin-right:auto;
  min-height:44px;padding:2px 4px;margin-left:-4px;border-radius:8px;}
.co-mark:hover .co-word{color:var(--gold);}
.co-r{width:32px;height:32px;flex:none;border:1.5px solid var(--gold);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-family:var(--head);font-size:15px;color:var(--gold);}
.co-word{font-family:var(--head);text-transform:uppercase;letter-spacing:.16em;font-size:15px;transition:color .15s;}
.co-bar-secure{font-family:var(--head);font-size:13px;letter-spacing:.06em;color:#C6CBDD;white-space:nowrap;}
.co-quietfoot{background:var(--navy);color:#C6CBDD;margin-top:60px;}
.co-quietfoot-in{max-width:var(--maxw);margin:0 auto;padding:20px 24px;display:flex;align-items:center;
  justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:14px;}
.co-quietfoot-in > span:first-child{margin-right:auto;}
.co-foot-links{display:flex;gap:22px;flex-wrap:wrap;}
.co-foot-links a{color:#C6CBDD;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;cursor:pointer;}
.co-foot-links a:hover{color:var(--gold);}
.co-bar a:focus-visible,.co-quietfoot a:focus-visible{outline:2px solid #F6F3EA;outline-offset:3px;}
@media (max-width:640px){
  .co-bar-in{padding:13px 18px;gap:12px;}
  .co-bar-secure{display:none;}
  .co-quietfoot-in{padding:16px 18px;}
  .co-foot-links{gap:16px;}
}
.tco-bar{background:var(--navy);color:#fff;}
.tco-bar-in{max-width:var(--maxw);margin:0 auto;padding:15px 24px;display:flex;align-items:center;gap:18px;}
.tco-mark{display:inline-flex;align-items:center;gap:11px;color:#fff;text-decoration:none;margin-right:auto;
  min-height:44px;padding:2px 4px;margin-left:-4px;border-radius:8px;}
.af{margin:0 0 18px;padding:14px 16px;border:1px solid var(--line,#e3ddcf);border-radius:10px;background:#fff}
.af > label{display:block;font-family:var(--head);text-transform:uppercase;letter-spacing:.12em;font-size:11.5px;color:var(--navy,#1a2450);margin:0 0 8px}
.af-row{display:flex;gap:10px;flex-wrap:wrap}
.af-row input{flex:1 1 180px;min-width:0;padding:12px 14px;border:1px solid #d6d9e2;border-radius:6px;font:inherit;text-transform:uppercase}
.af-row input::placeholder{text-transform:none}
.af-go{white-space:nowrap}
.af-pick{width:100%;margin-top:10px;padding:12px;border:1px solid #d6d9e2;border-radius:6px;font:inherit;background:#fff}
.af-msg{margin:8px 0 0;font-size:13.5px;color:#5c6070}
.af-err{color:#a3261c}
.kr-tabs{display:flex;gap:8px;margin:0 0 16px;flex-wrap:wrap}
.kr-tab{flex:1 1 180px;padding:11px 14px;border:1.5px solid var(--line);border-radius:10px;background:#fff;font:inherit;font-size:14.5px;color:var(--navy);cursor:pointer}
.kr-tab.on{border-color:var(--navy);background:var(--navy);color:#fff}
.tp-notes{list-style:none;margin:0;padding:0;display:grid;gap:12px}
#tp .tp-hours{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:14px 0 0;font-size:14px;color:var(--muted)}
#tp .tp-hours dt{font-weight:600;color:var(--navy)}
#tp .tp-hours dd{margin:0}
#tp .tp-pwrules{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:5px;font-size:13.5px;color:var(--muted)}
#tp .tp-pwrules li{display:flex;align-items:center;gap:8px}
#tp .tp-pwrules li::before{content:"\2022";width:14px;text-align:center;font-size:15px}
#tp .tp-pwrules li.ok{color:#245c35}
#tp .tp-pwrules li.ok::before{content:"\2713"}
#tp .tp-pwrules li.no{color:#a3261c}
#tp .tp-pwrules li.no::before{content:"\00d7"}
#tp .tp-sc-list{list-style:none;margin:0;padding:0}
#tp .tp-sc-list li{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
#tp .tp-sc-list li:first-child{border-top:0}
#tp .tp-sc-list li>div{flex:1;min-width:0}
#tp .tp-sc-list small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
#tp .tp-sc-state{font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:999px;background:#eef0f5;color:#4a4f60;white-space:nowrap}
#tp .tp-sc-ready{background:#e7f2ea;color:#245c35}
#tp .tp-sc-used{background:#f3efe4;color:#6b5a26}
#tp .tp-doc{display:flex;align-items:stretch;gap:8px}
#tp .tp-doc>a:first-child{flex:1;min-width:0}
#tp .tp-doc-dl{display:flex;align-items:center;gap:6px;padding:0 14px;border:1px solid var(--line);border-radius:8px;color:var(--navy);text-decoration:none;font-size:13px;font-weight:600;white-space:nowrap}
#tp .tp-doc-dl svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7}
#tp .tp-doc-dl:hover{background:var(--navy);color:#fff}
.tp-keep-all{display:flex;gap:8px;margin-left:auto}
.tp-keep-b .tp-item{padding:12px 0}
.tp-keep-f .tp-keep-tg{margin-right:auto}
.tp-stg-h{margin:22px 0 10px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#6b6f7c;font-weight:600}
.tp-stg{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tp-stg li{display:flex;justify-content:space-between;gap:12px;font-size:14.5px;border-bottom:1px dashed rgba(0,0,0,.08);padding-bottom:6px}
.tp-stg li:last-child{border-bottom:0}
.tp-stg small{color:#6b6f7c;white-space:nowrap}
.tp-stg .tp-stg-now b{color:var(--gold-deep,#9a7b2f)}
.tp-notes li{border-bottom:1px solid rgba(0,0,0,.07);padding-bottom:10px}
.tp-notes li:last-child{border-bottom:0;padding-bottom:0}
.tp-notes p{margin:0 0 3px}
.tp-notes small{color:#8a8f9c;font-size:12.5px}
.af-fields[data-open="0"]{display:none}
.af-manual{background:none;border:0;padding:0;margin:10px 0 0;font:inherit;font-size:13.5px;color:var(--navy,#1a2450);text-decoration:underline;text-underline-offset:3px;cursor:pointer;display:block;margin-left:auto}
.af-manual[hidden]{display:none}
.af-chip{display:inline-block;margin:10px 0 0;padding:5px 11px;border:1px solid #d9dce5;border-radius:999px;font-size:12.5px;color:#4a4f60;background:#f6f7fa}
.co-logo{width:34px;height:34px;object-fit:contain;flex:none}
.tco-logo{width:34px;height:34px;object-fit:contain;flex:none}
.tco-r{width:32px;height:32px;flex:none;border:1.5px solid var(--gold);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-family:var(--head);font-size:15px;color:var(--gold);}
.tco-word{font-family:var(--head);text-transform:uppercase;letter-spacing:.16em;font-size:15px;}
.tco-portal{font-family:var(--head);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:#C6CBDD;padding-left:13px;margin-left:2px;border-left:1px solid rgba(200,178,115,.5);}
.tco-bar-who{text-align:right;line-height:1.3;}
.tco-bar-who b{display:block;font-family:var(--head);font-size:14px;font-weight:500;color:#fff;}
.tco-bar-who small{font-family:var(--head);font-size:13px;color:#C6CBDD;}
.tco-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;
  font-family:var(--head);font-size:14px;color:#fff;text-decoration:none;
  border:1px solid rgba(200,178,115,.55);border-radius:9px;white-space:nowrap;}
.tco-back:hover{border-color:var(--gold);color:var(--gold);}
.tco-back svg{width:17px;height:17px;}
.tco-bar a:focus-visible,.tco-foot a:focus-visible{outline:2px solid #F6F3EA;outline-offset:3px;}
.tco-foot{background:var(--navy);color:#C6CBDD;margin-top:60px;}
.tco-foot-in{max-width:var(--maxw);margin:0 auto;padding:20px 24px;display:flex;align-items:center;
  gap:18px;flex-wrap:wrap;font-family:var(--head);font-size:14px;}
.tco-foot-in > span:first-child{margin-right:auto;}
.tco-foot-links{display:flex;gap:22px;flex-wrap:wrap;}
.tco-foot-links a{color:#C6CBDD;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;}
.tco-foot-links a:hover{color:var(--gold);}
/* On a phone the branch name and the way back need their own line under the mark. */
@media(max-width:768px){
  .tco-bar-in{flex-wrap:wrap;gap:10px 14px;padding:13px 18px;}
  .tco-mark{margin-right:0;width:100%;}
  .tco-portal{margin-left:auto;padding-left:0;border-left:0;}
  .tco-bar-who{text-align:left;margin-right:auto;}
  .tco-foot-in{padding:16px 18px;}
  .tco-foot-links{gap:16px;}
}
.tco-h{font-family:var(--head);text-transform:uppercase;letter-spacing:.14em;font-size:13px;
  color:var(--navy);margin:30px 0 16px;padding-bottom:9px;border-bottom:1px solid var(--line);}
.tco-h:first-of-type{margin-top:0;}
.checkout textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:4px;
  font-family:var(--body);font-size:16px;color:var(--ink);background:var(--white);line-height:1.55;resize:vertical;}
.checkout textarea:focus{outline:2px solid var(--navy);outline-offset:2px;border-color:var(--navy);}
.tco-check{display:flex;gap:11px;align-items:flex-start;padding:10px 0;cursor:pointer;
  font-size:16px;line-height:1.55;color:#4a4f5e;min-height:44px;}
.tco-check input{flex:0 0 auto;width:19px;height:19px;margin-top:3px;accent-color:#0F1944;}
.tco-check a{color:var(--gold-deep);text-decoration:underline;}
.tco-commit{background:var(--cream-2);border:1px solid var(--gold);border-radius:10px;
  padding:14px 16px;margin-top:10px;color:var(--navy);}
.tco-onfile{background:var(--cream-2);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;margin:4px 0 10px;font-size:16px;line-height:1.6;color:var(--navy);}
.tco-ships{display:flex;flex-direction:column;gap:10px;}
.tco-ship{display:flex;align-items:flex-start;gap:13px;border:1.5px solid var(--line);border-radius:11px;
  background:var(--white);padding:13px 15px;cursor:pointer;transition:.16s;min-height:44px;}
.tco-ship:hover{border-color:var(--gold-deep);}
.tco-ship.on{border-color:#0F1944;border-width:2.5px;padding:11.5px 13.5px;}
.tco-ship input{flex:0 0 auto;width:19px;height:19px;margin-top:2px;accent-color:#0F1944;}
.tco-ship-t{flex:1;min-width:0;}
.tco-ship-t b{display:block;font-family:var(--head);font-size:16px;font-weight:500;color:var(--navy);}
.tco-ship-w{font-weight:400;color:#5c6070;}
.tco-ship-t small{display:block;font-size:13px;color:#5c6070;margin-top:3px;line-height:1.45;}
.tco-ship-foot{margin:2px 0 0;font-size:12.5px;color:#5c6070;}
.co-paynote{margin:0;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:#fbfaf6;font-size:14.5px;color:#4a4f5e;}
/* Save for later: quiet, under the thing somebody came to do, never in its way. */
.co-later{margin:14px 0 0;font-size:14px;color:#4a4f5e;text-align:center;line-height:1.5}
.co-later span{display:block;font-size:12.5px;color:#6a6f80;margin-top:2px}
.co-later-btn,.co-code-x{background:none;border:0;padding:0;font:inherit;color:var(--navy,#1a2450);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.co-code-x{font-size:12px;margin-left:6px;color:#6a6f80}
/* The totals rows are flex, which beat the hidden attribute: an empty "Discount" row showed. */
.os-totals .r[hidden]{display:none}
.drawer-later{display:block;width:100%;margin-top:12px;background:none;border:0;padding:6px 0;font:inherit;font-size:14px;color:var(--navy,#1a2450);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.drawer-later-n{display:block;text-align:center;font-size:12.5px;color:#6a6f80;margin-top:2px}
/* Gift vouchers */
.gv-amounts{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 18px}
.gv-amt{flex:1 1 90px;padding:16px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;font-family:var(--head);font-size:20px;color:var(--navy,#1a2450);cursor:pointer}
.gv-amt.on{border-color:var(--gold,#bfa15f);box-shadow:0 0 0 2px var(--gold,#bfa15f) inset;background:#fbfaf6}
.gv-card{max-width:620px;margin:0 auto;padding:26px;border:1px solid var(--line);border-radius:14px;background:#fff}
.gv-card .field{margin-bottom:14px}
.gv-card textarea{width:100%;min-height:90px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;font:inherit}
.gv-fine{font-size:13px;color:#6a6f80;line-height:1.6;margin-top:14px}
.tco-ship-p{flex:0 0 auto;font-family:var(--head);font-size:16px;color:var(--gold-deep);}
.tco-acct{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);}
.tco-acct h3{margin-bottom:12px;}
.tco-acct-r{display:flex;justify-content:space-between;gap:14px;padding:6px 0;font-size:15px;}
.tco-acct-r span{color:#5c6070;}
.tco-acct-r b{font-family:var(--head);font-weight:500;color:var(--navy);text-align:right;}
.tco-acct-n{font-size:13px;color:#5c6070;font-style:italic;margin-top:9px;}
@media(max-width:768px){
  .tco-ship{flex-wrap:wrap;}
  .tco-ship-p{width:100%;padding-left:32px;}
}
.co-trust{text-align:center;font-size:12.5px;color:#5c6070;margin:16px 0 4px;}
.cart-trust{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;font-size:12px;font-family:var(--head);text-transform:uppercase;letter-spacing:.08em;color:#64685B;margin-top:14px;}
/* Prototype-only express wallet buttons under the main checkout button. */
/* Hidden until DNA wallets are switched on (30 Sep 2026): a button that only says "not available yet" should not be there. Apple Pay and Google Pay can be offered on DNA's own payment page instead. */
.paywallet{display:none;gap:8px;margin-top:8px}
.pw-btn{flex:1;height:42px;border-radius:7px;display:flex;align-items:center;justify-content:center;gap:5px;cursor:pointer;border:1px solid transparent;font-weight:600;font-size:15px;line-height:1;transition:.15s}
.pw-apple{background:#000;color:#fff}
.pw-apple .pw-txt{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',Helvetica,Arial,sans-serif}
.pw-apple .pw-al{margin-top:-1px}
.pw-apple:hover{background:#1a1a1a}
.pw-gpay{background:#fff;border-color:#dadce0;color:#3c4043}
.pw-gpay .pw-gtxt{font-family:'Roboto','Product Sans',Arial,sans-serif;font-weight:500;color:#5f6368}
.pw-gpay:hover{background:#f7f8f8}
@media(max-width:1000px){.tgrid{grid-template-columns:1fr;}.trustbar .wrap{gap:16px 24px;}}
@media(max-width:600px){
  .trustbar{background:var(--cream-2);color:var(--navy);border-top:0;border-bottom:1px solid var(--line);}
  .trustbar .wrap{flex-direction:column;align-items:flex-start;gap:13px;padding:19px 18px 20px;}
  /* on a two-line item the star sat halfway down it, so the three stars did not line up */
  .trustbar span{color:var(--navy);font-size:14px;letter-spacing:.15em;gap:9px;align-items:flex-start;}
  .trustbar span b{line-height:1.55;}
  .trustbar span b{color:var(--gold-deep);font-size:12px;}
}
@media(max-width:600px){
  /* brand benefits: one per row, icon beside the title, faint rule between */
  .trust{grid-template-columns:1fr;gap:0;}
  .trust .ti{padding:16px 2px 17px;}
  .trust .ti:first-child{padding-top:2px;}
  .trust .ti:last-child{padding-bottom:2px;}
  .trust .ti:not(:last-child){border-bottom:1px solid var(--line);}
  .trust .ti-head{display:flex;align-items:center;justify-content:center;gap:10px;}
  .trust .ti svg{width:23px;height:23px;margin:0;flex:0 0 auto;}
  .trust .ti h4{margin:0;font-size:18px;line-height:1.2;}
  .trust .ti p{margin:7px auto 0;font-size:15.5px;line-height:1.5;max-width:40ch;}
}
.process{display:flex;flex-wrap:wrap;justify-content:center;gap:30px 22px;margin-top:6px;}
.process .step{flex:1 1 168px;max-width:205px;padding:6px;}
@media(max-width:600px){.process .step{flex:1 1 100%;max-width:none;}}
.trade-link{display:inline-flex;align-items:center;gap:7px;font-family:var(--head);text-transform:none;letter-spacing:.015em;font-size:16px;color:var(--cream);border:1px solid #2a3768;padding:8px 14px;border-radius:30px;transition:.2s;white-space:nowrap;margin-right:4px;}
.trade-link:hover{border-color:var(--gold);color:var(--gold);}
.trade-link svg{width:18px;height:18px;}
.story-feature{margin:44px auto;max-width:440px;border-radius:5px;overflow:hidden;border:1px solid var(--line);}
.story-feature img{width:100%;display:block;}
.story-feature-lg{max-width:600px;border-radius:10px;}
.story-read p{font-size:19px;line-height:1.78;}
.story-read .story-lead{font-family:var(--body);font-style:italic;font-size:24px;color:var(--gold-deep);line-height:1.5;margin-bottom:26px;}
.story-values-band{background:var(--cream-2);}
.values-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:820px;margin:0 auto;}
.value-card{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:28px 28px 26px;}
.value-card .value-n{display:block;font-family:var(--head);font-size:34px;font-weight:300;color:var(--gold);line-height:1;margin-bottom:14px;}
.value-card h3{font-size:19px;font-weight:400;color:var(--navy);margin:0 0 8px;}
.value-card p{font-size:15.5px;color:#5c6070;margin:0;line-height:1.6;}
@media(max-width:768px){.values-grid{grid-template-columns:1fr;}}
.hiw-photo{border-radius:4px;overflow:hidden;aspect-ratio:1/1;}
.hiw-photo img{width:100%;height:100%;object-fit:cover;object-position:center;}
.trade-auth{background:var(--cream);padding:64px 0;}
.ta-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center;max-width:1080px;margin:0 auto;}
.ta-intro h1{font-weight:300;font-size:clamp(28px,3.4vw,42px);margin:12px 0 16px;line-height:1.1;}
.ta-lede{color:#5c6070;font-size:17px;}
.ta-benefits{list-style:none;padding:0;margin:22px 0;display:flex;flex-direction:column;gap:10px;}
.ta-benefits li{position:relative;padding-left:26px;color:#4a4f5e;font-size:16px;}
.ta-benefits li::before{content:'✦';position:absolute;left:0;color:var(--gold-deep);}
.ta-customer{background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:4px;padding:14px 16px;font-size:15.5px;color:#4a4f5e;}
.ta-customer a{color:var(--gold-deep);text-decoration:underline;}
.ta-card{background:var(--navy);color:var(--cream);border-radius:6px;padding:34px 32px;box-shadow:0 24px 50px rgba(15,25,68,.2);}
.ta-card h2{color:var(--cream);font-weight:400;font-family:var(--head);text-transform:uppercase;letter-spacing:.14em;font-size:18px;}
.ta-sub{color:#aeb4d0;font-size:14px;margin:6px 0 22px;}
.ta-card .field label{color:#c7cce0;}
.ta-card .field input{background:#16224f;border:1px solid #2a3768;color:var(--cream);}
.ta-card .field input::placeholder{color:#6b73a0;}
.ta-row{display:flex;justify-content:space-between;align-items:center;margin:4px 0 18px;font-size:13px;color:#c7cce0;}
.ta-check{display:flex;gap:8px;align-items:center;font-family:var(--body);text-transform:none;letter-spacing:0;cursor:pointer;padding:5px 0;min-height:24px;}
.ta-forgot{color:var(--gold);}
.ta-secure{text-align:center;font-size:12px;color:#9aa0c0;margin-top:14px;}
.ta-apply{text-align:center;margin-top:18px;padding-top:16px;border-top:1px solid #25315f;font-size:13.5px;color:#c7cce0;}
.ta-apply a{color:var(--gold);}
/* ---- Opening a trade account: the request on the website, and finishing the account ------ */
.tob{background:var(--cream);padding:56px 0 80px;}
.tob-wrap{max-width:1040px;margin:0 auto;}
.tob-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start;}
.tob h1{font-weight:300;font-size:clamp(28px,3.4vw,40px);margin:12px 0 16px;line-height:1.1;}
.tob-card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:28px 28px 24px;}
.tob-card + .tob-card{margin-top:22px;}
.tob-card h2{font-weight:400;font-family:var(--head);text-transform:uppercase;letter-spacing:.12em;font-size:16px;color:var(--navy);margin:0 0 6px;}
.tob-sub{color:#5c6070;font-size:15px;margin:0 0 20px;line-height:1.6;}
.tob-opt{font-family:var(--body);text-transform:none;letter-spacing:0;color:#8a8f9c;font-size:12.5px;}
.tob-steps{counter-reset:tob;list-style:none;padding:0;margin:22px 0;display:grid;gap:14px;}
.tob-steps li{counter-increment:tob;position:relative;padding-left:40px;color:#4a4f5e;font-size:15.5px;line-height:1.55;min-height:28px;}
.tob-steps li::before{content:counter(tob);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--navy);color:var(--cream);font-family:var(--head);font-size:13px;display:flex;align-items:center;justify-content:center;}
.tob-branch{border:1px solid var(--line);border-radius:4px;padding:16px 16px 4px;margin-bottom:14px;background:var(--cream);}
.tob-branch-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-family:var(--head);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);}
.tob-remove{background:none;border:0;color:#7A3020;text-decoration:underline;cursor:pointer;font-size:14px;font-family:var(--body);padding:6px 0;}
.tob-terms{max-height:440px;overflow:auto;white-space:pre-wrap;border:1px solid var(--line);border-radius:4px;padding:18px;background:var(--cream);font-size:15px;line-height:1.65;color:#2a2e3f;overflow-wrap:anywhere;}
.tob-agree{display:flex;gap:10px;align-items:flex-start;margin:18px 0 16px;font-size:15.5px;line-height:1.5;cursor:pointer;}
.tob-agree input{margin-top:4px;width:18px;height:18px;flex:none;}
.tob-note{background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:4px;padding:14px 16px;font-size:15px;color:#4a4f5e;line-height:1.6;}
.tob-banner{margin:0 0 18px;background:#fbf6ea;border:1px solid #e6d7b0;border-left:4px solid var(--gold);border-radius:6px;padding:14px 18px;color:#3d3a30;font-size:14.5px;line-height:1.55;display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;}
.tob-banner b{color:var(--navy);}
@media(max-width:820px){.tob{padding:36px 0 60px}.tob-grid{grid-template-columns:1fr;gap:28px}.tob-card{padding:22px 18px}}
@media(max-width:560px){.tob .field-row{grid-template-columns:1fr;gap:0}}
/* ---- Opening a trade account: the request on the website, and finishing the account ------ */
.tob{background:var(--cream);padding:56px 0 80px;}
.tob-wrap{max-width:1040px;margin:0 auto;}
.tob-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start;}
.tob h1{font-weight:300;font-size:clamp(28px,3.4vw,40px);margin:12px 0 16px;line-height:1.1;}
.tob-card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:28px 28px 24px;}
.tob-card + .tob-card{margin-top:22px;}
.tob-card h2{font-weight:400;font-family:var(--head);text-transform:uppercase;letter-spacing:.12em;font-size:16px;color:var(--navy);margin:0 0 6px;}
.tob-sub{color:#5c6070;font-size:15px;margin:0 0 20px;line-height:1.6;}
.tob-opt{font-family:var(--body);text-transform:none;letter-spacing:0;color:#8a8f9c;font-size:12.5px;}
.tob-steps{counter-reset:tob;list-style:none;padding:0;margin:22px 0;display:grid;gap:14px;}
.tob-steps li{counter-increment:tob;position:relative;padding-left:40px;color:#4a4f5e;font-size:15.5px;line-height:1.55;min-height:28px;}
.tob-steps li::before{content:counter(tob);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--navy);color:var(--cream);font-family:var(--head);font-size:13px;display:flex;align-items:center;justify-content:center;}
.tob-branch{border:1px solid var(--line);border-radius:4px;padding:16px 16px 4px;margin-bottom:14px;background:var(--cream);}
.tob-branch-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-family:var(--head);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);}
.tob-remove{background:none;border:0;color:#7A3020;text-decoration:underline;cursor:pointer;font-size:14px;font-family:var(--body);padding:6px 0;}
.tob-terms{max-height:440px;overflow:auto;white-space:pre-wrap;border:1px solid var(--line);border-radius:4px;padding:18px;background:var(--cream);font-size:15px;line-height:1.65;color:#2a2e3f;overflow-wrap:anywhere;}
.tob-agree{display:flex;gap:10px;align-items:flex-start;margin:18px 0 16px;font-size:15.5px;line-height:1.5;cursor:pointer;}
.tob-agree input{margin-top:4px;width:18px;height:18px;flex:none;}
.tob-note{background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:4px;padding:14px 16px;font-size:15px;color:#4a4f5e;line-height:1.6;}
.tob-banner{margin:0 0 18px;background:#fbf6ea;border:1px solid #e6d7b0;border-left:4px solid var(--gold);border-radius:6px;padding:14px 18px;color:#3d3a30;font-size:14.5px;line-height:1.55;display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;}
.tob-banner b{color:var(--navy);}
@media(max-width:820px){.tob{padding:36px 0 60px}.tob-grid{grid-template-columns:1fr;gap:28px}.tob-card{padding:22px 18px}}
@media(max-width:560px){.tob .field-row{grid-template-columns:1fr;gap:0}}
.trade-dash{padding:46px 0 78px;}
.td-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:26px;}
.td-head h1{font-weight:300;font-size:clamp(24px,3vw,34px);margin:6px 0;}
.td-meta{color:#64685B;font-size:13.5px;}
.td-head-right{display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
.tier-badge{font-family:var(--head);text-transform:uppercase;letter-spacing:.1em;font-size:12px;padding:8px 15px;border-radius:30px;white-space:nowrap;}
.tier-silver{background:#e6e8eb;color:var(--navy);}
.tier-gold{background:var(--gold);color:var(--navy);}
.tier-platinum{background:linear-gradient(135deg,#1b2a55,#3a4a7a);color:var(--gold);border:1px solid var(--gold);}
.td-logout{font-family:var(--head);text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:#64685B;}
.td-logout:hover{color:var(--garnet);}
.td-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:24px;}
.kpi{background:#fff;border:1px solid var(--line);border-radius:5px;padding:20px;}
.kpi small{font-family:var(--head);text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:#64685B;display:block;}
.kpi b{font-family:var(--head);font-weight:500;font-size:26px;color:var(--navy);display:block;margin:6px 0 2px;}
.kpi span{font-size:12.5px;color:#64685B;}
.td-cols{display:grid;grid-template-columns:1.7fr 1fr;gap:24px;align-items:start;}
.td-card{background:#fff;border:1px solid var(--line);border-radius:5px;padding:22px;margin-bottom:18px;}
.td-card h3{font-family:var(--head);text-transform:uppercase;letter-spacing:.12em;font-size:13px;margin-bottom:14px;}
.td-card-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px;}
.td-card-h h3{margin-bottom:0;}
.td-card-h span{font-size:12.5px;color:#64685B;}
.otable{width:100%;border-collapse:collapse;font-size:13.5px;}
.otable th{text-align:left;font-family:var(--head);text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:#64685B;padding:9px 10px;border-bottom:1px solid var(--line);}
.otable td{padding:11px 10px;border-bottom:1px solid var(--line);color:#4a4f5e;vertical-align:top;}
.otable td b{color:var(--navy);font-family:var(--head);font-weight:500;font-size:13px;display:block;}
.otable td small{color:#64685B;font-size:12px;}
.omono{font-family:var(--head);color:var(--navy);font-size:12.5px;white-space:nowrap;}
.ocomm{font-family:var(--head);color:var(--gold-deep);}
.ostatus{display:inline-block;font-family:var(--head);text-transform:uppercase;letter-spacing:.07em;font-size:12px;padding:4px 9px;border-radius:20px;white-space:nowrap;}
.os-pending{background:#fbeccd;color:#7a5a12;}
.os-studio{background:#dfe4f2;color:#2a3768;}
.os-dispatched{background:#efe2c0;color:#7a6320;}
.os-completed{background:#d9ebdd;color:#2c5a37;}
.tier-card{background:linear-gradient(160deg,#fff,#f6f3ea);}
.tier-prog-bar{height:8px;background:var(--cream-2);border-radius:6px;overflow:hidden;}
.tier-prog-bar span{display:block;height:100%;background:var(--gold);}
.tier-prog-lbl{font-size:12.5px;color:#5c6070;margin:8px 0 16px;}
.tier-prog-lbl b{color:var(--navy);}
.tier-perks-h{font-family:var(--head);text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:var(--gold-deep);margin:6px 0 8px;}
.tier-perks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px;}
.tier-perks li{position:relative;padding-left:20px;font-size:13px;color:#4a4f5e;}
.tier-perks li::before{content:'✓';position:absolute;left:0;color:var(--gold-deep);}
.tier-next{margin-top:14px;font-size:12.5px;color:#64685B;font-style:italic;border-top:1px solid var(--line);padding-top:12px;}
.td-stock{font-family:var(--head);font-size:22px;color:var(--navy);margin:0 0 12px;}
.mgr{font-size:13.5px;color:#4a4f5e;line-height:1.7;}
.mgr b{color:var(--navy);}
.td-res{display:block;font-size:13.5px;color:var(--gold-deep);padding:8px 0;border-bottom:1px solid var(--line);}
.td-res:last-child{border-bottom:none;}
.td-res:hover{color:var(--navy);}
@media(max-width:1000px){.td-kpis{grid-template-columns:repeat(2,1fr);}.td-cols{grid-template-columns:1fr;}.ta-grid{grid-template-columns:1fr;gap:32px;}}
@media(max-width:768px){.trade-link span{display:none;}.trade-link{padding:8px;}}
@media(max-width:600px){.otable thead{display:none;}.otable td{display:flex;justify-content:space-between;gap:14px;border:none;padding:4px 0;}.otable td::before{content:attr(data-l);font-family:var(--head);text-transform:uppercase;font-size:12px;letter-spacing:.08em;color:#64685B;}.otable tr{display:block;border-bottom:1px solid var(--line);padding:12px 0;}}
[data-version="1"] .hero p.lede,[data-version="3"] .hero p.lede{max-width:40ch;}
.hiw-free{margin-top:22px;background:var(--cream-2);border-left:3px solid var(--gold);padding:14px 16px;font-size:16px;color:#4a4f5e;border-radius:0 4px 4px 0;}
/* Print-kit responsive grids */
.pk-kit{gap:50px;align-items:center;}
@media(max-width:1000px){.pk-kit{gap:26px;}}
/* Print-kit "three ways" cards */
.pk-ways{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:980px;margin:6px auto 0;}
.pk-way{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:28px 26px;}
.pk-way-ic{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;background:var(--cream-2);color:var(--gold-deep);margin-bottom:16px;}
.pk-way-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.pk-way h3{font-size:18px;font-weight:400;color:var(--navy);margin:0 0 8px;}
.pk-way p{font-size:15px;color:#5c6070;line-height:1.6;margin:0;}
@media(max-width:768px){.pk-ways{grid-template-columns:1fr;max-width:520px;}}
/* Extras — compact list rows (like pre-checkout) */
.ex-group{max-width:760px;margin:0 auto 20px;}
.ex-group .eyebrow{display:block;margin-bottom:8px;}
.ex-group p{font-size:14.5px;color:#5c6070;margin:0;line-height:1.55;}
.ex-list{display:flex;flex-direction:column;gap:14px;max-width:760px;margin:0 auto;}
.ex-row{display:flex;gap:18px;border:1px solid var(--line);border-radius:8px;background:var(--white);padding:16px 18px;align-items:center;}
.ex-media{flex:0 0 84px;width:84px;height:84px;border-radius:6px;overflow:hidden;background:var(--cream-2);}
.ex-media img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;}
.ex-main{flex:1;min-width:0;}
.ex-main h2{font-size:16.5px;font-weight:400;color:var(--navy);margin:0;}
.ex-main p{font-size:13.5px;color:#5c6070;margin:4px 0 0;line-height:1.5;}
.ex-main select{margin-top:11px;font-family:var(--body);font-size:16px;color:var(--ink);border:1px solid var(--line);border-radius:4px;padding:8px 10px;background:var(--white);cursor:pointer;max-width:220px;width:100%;}
.ex-picks{display:flex;flex-wrap:wrap;gap:10px;margin-top:11px;}
.ex-picks select{margin-top:0;max-width:none;width:auto;flex:1 1 148px;min-width:130px;}
.ex-action{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:9px;text-align:right;}
.ex-price{font-family:var(--head);font-size:16px;color:var(--navy);white-space:nowrap;}
.ex-action .btn{padding:9px 18px;font-size:12px;}
@media(max-width:600px){
  .ex-row{flex-wrap:wrap;}
  .ex-media{flex:0 0 60px;width:60px;height:60px;}
  .ex-main{flex:1 1 60%;}
  .ex-action{flex:1 0 100%;flex-direction:row;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:12px;margin-top:2px;}
}
/* How It Works — vertical alternating image/text journey */
.hiw-journey{position:relative;max-width:940px;margin:8px auto 0;}
.hiw-journey::before{content:"";position:absolute;left:50%;top:30px;bottom:30px;width:2px;background:rgba(200,178,115,.5);transform:translateX(-50%);}
.hiw-jrow{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:66px;align-items:center;margin:0 0 54px;}
.hiw-jrow:last-child{margin-bottom:0;}
.hiw-jimg{aspect-ratio:1/1;max-width:430px;border-radius:12px;overflow:hidden;border:1px solid var(--line);box-shadow:0 18px 40px rgba(15,25,68,.13);}
.hiw-jimg img{width:100%;height:100%;object-fit:cover;display:block;}
.hiw-jtext{padding:0 4px;}
.hiw-jtext .hiw-overline{display:block;font-family:var(--head);text-transform:uppercase;letter-spacing:.22em;font-size:12px;color:var(--gold-deep);margin-bottom:9px;}
.hiw-jtext h3{font-size:24px;font-weight:300;color:var(--navy);margin:0 0 10px;}
.hiw-jtext p{font-size:16.5px;color:#5c6070;line-height:1.65;margin:0;max-width:370px;}
.hiw-jrow.reverse .hiw-jimg{grid-column:2;grid-row:1;}
.hiw-jrow.reverse .hiw-jtext{grid-column:1;grid-row:1;text-align:right;}
.hiw-jrow.reverse .hiw-jtext p{margin-left:auto;}
.hiw-jnode{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:var(--gold);color:var(--navy);font-family:var(--head);font-size:16px;display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:0 0 0 6px var(--cream);}
@media(max-width:768px){
  .hiw-journey{max-width:520px;}
  .hiw-journey::before{left:22px;}
  .hiw-jrow{grid-template-columns:1fr;gap:16px;padding-left:60px;margin-bottom:38px;}
  .hiw-jrow.reverse .hiw-jimg,.hiw-jrow.reverse .hiw-jtext{grid-column:1;grid-row:auto;text-align:left;}
  .hiw-jrow.reverse .hiw-jtext p{margin-left:0;}
  .hiw-jimg{aspect-ratio:3/2;}
  .hiw-jtext p{max-width:none;}
  .hiw-jnode{left:22px;top:32px;width:40px;height:40px;font-size:14px;box-shadow:0 0 0 5px var(--cream);}
}
.hamburger{display:none;align-items:center;justify-content:center;background:none;border:none;color:var(--cream);padding:4px;cursor:pointer;justify-self:start;}
.hamburger svg{width:24px;height:24px;}
.mobile-menu{left:0;right:auto;transform:translateX(-100%);width:min(360px,86vw);}
.mobile-menu.show{transform:translateX(0);}
.mobile-nav{padding:6px 0 30px;overflow-y:auto;}
.mobile-nav a{display:block;padding:14px 26px;font-family:var(--head);text-transform:uppercase;letter-spacing:.12em;font-size:13px;color:var(--navy);border-bottom:1px solid var(--line);cursor:pointer;}
.mobile-nav a:hover{background:var(--cream);color:var(--gold-deep);}
.mobile-nav .mm-sub{padding:11px 26px 11px 40px;font-size:12px;letter-spacing:.06em;color:#5c6070;text-transform:none;font-family:var(--body);}
.mobile-nav .mm-head{padding:16px 26px 6px;color:var(--gold-deep);font-size:12px;letter-spacing:.2em;font-family:var(--head);text-transform:uppercase;}
.mobile-nav .mm-trade{background:var(--navy);color:var(--cream);margin-top:10px;border-bottom:none;}
.mobile-nav .mm-trade:hover{background:var(--navy-2);color:var(--gold);}
/* The three shop groups are folded away when the menu opens, so the first thing on screen is
   the shape of the menu rather than twenty links. Opening one leaves the others as they were,
   because closing something somebody opened is a surprise. */
.mobile-nav .mm-group{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:15px 20px 15px 26px;min-height:52px;background:none;border:0;border-bottom:1px solid var(--line);
  font-family:var(--head,var(--head-font));text-transform:uppercase;letter-spacing:.12em;font-size:13px;
  color:var(--navy);text-align:left;cursor:pointer;}
.mobile-nav .mm-group:hover{background:var(--cream);color:#6E5A28;}
.mobile-nav .mm-chev{width:18px;height:18px;flex:none;color:#6E5A28;transition:transform .18s;}
.mobile-nav .mm-group[aria-expanded="true"]{color:#6E5A28;border-bottom-color:transparent;}
.mobile-nav .mm-group[aria-expanded="true"] .mm-chev{transform:rotate(180deg);}
.mobile-nav .mm-panel{background:var(--cream-3,#FAF8F2);border-bottom:1px solid var(--line);}
.mobile-nav .mm-panel[hidden]{display:none;}
.mobile-nav .mm-panel a{border-bottom:1px solid var(--line-2,#EAE5D8);padding-top:13px;padding-bottom:13px;}
.mobile-nav .mm-panel a:last-child{border-bottom:0;}
.mobile-menu .drawer-head{padding-right:16px;}
.mobile-menu .mm-close{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;
  border-radius:50%;border:1px solid var(--line);background:var(--white);color:var(--navy);cursor:pointer;transition:.15s;flex:none;}
.mobile-menu .mm-close:hover{background:var(--navy);border-color:var(--navy);color:var(--cream);}
.mobile-menu .mm-close svg{width:20px;height:20px;}
@media(max-width:1000px){.hamburger{display:inline-flex;}.trade-link{display:none;}}
/* The row is centred in its column, so once it is wider than the column it runs over the
   wordmark on both sides. Between the widest laptop and the point where the menu button
   takes over, the space between the items closes up instead. */
/* One step instead of three. The full navigation only has to survive between 1000 and 1240,
   because below 1000 it becomes the menu button, so a single tightened setting covers it. */
@media(max-width:1240px){nav.primary{gap:14px;}.header-grid{padding:14px 18px;gap:14px;}}
[data-shopmenu="horizontal"] .dropdown{left:50%;transform:translateX(-50%) translateY(8px);width:min(800px,96vw);min-width:0;padding:20px 22px;}
[data-shopmenu="horizontal"] .has-menu:hover .dropdown{transform:translateX(-50%) translateY(2px);}
[data-shopmenu="horizontal"] #shopMenu{display:grid;grid-template-columns:1fr 270px;gap:6px 26px;align-items:start;}
.mega-print .dd-head{padding:2px 2px 12px;}
/* Three and three. Capped so the tiles stay near the size they were at five across
   rather than swelling to fill the column. */
.mp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:450px;}
.mp-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:#fff;transition:.18s;}
.mp-card:hover{border-color:var(--gold);box-shadow:0 12px 26px rgba(15,25,68,.14);transform:translateY(-2px);}
/* The tile's own colour matches the one baked into the five collection
   photographs, so a slow connection shows the same grey the picture is
   about to land on rather than a flash of cream, and any rounding gap at
   the edge is invisible. Change one and change the other. */
/* A real photograph in the gallery. `contain`, not `cover`: a locket shot
   landscape and a pendant shot portrait both have to fit the same square
   without the piece being cropped out of its own picture. */
.pd-photo{width:100%;height:100%;object-fit:contain;display:block;background:var(--photo-bg,#EEEEF0)}
.mp-img{display:block;width:100%;aspect-ratio:1/1;overflow:hidden;background:var(--photo-bg,#EEEEF0);}
.mp-img img{width:100%;height:100%;object-fit:cover;display:block;}
.mp-name{padding:9px 7px 11px;font-family:var(--head);text-transform:none;letter-spacing:.01em;font-size:12px;line-height:1.3;color:var(--navy);text-align:center;white-space:normal;overflow-wrap:break-word;flex:1;display:flex;align-items:center;justify-content:center;}
.mp-card:hover .mp-name{color:var(--gold-deep);}
.mega-print .dd-allp{display:inline-block;margin-top:13px;}
.mega-side{border-left:1px solid var(--line);padding-left:24px;display:grid;grid-template-columns:1fr 1fr;gap:0 20px;}
#shopMenu .mega-side .dd-group+.dd-group{margin-top:0;border-top:none;padding-top:0;}
select:invalid{color:#64685B;}
.pfield select.pf-invalid,.pfield input.pf-invalid{border-color:var(--garnet);box-shadow:0 0 0 2px rgba(74,0,0,.12);}
.shapeopt{cursor:pointer;}
.pf-check{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:#4a4f5e;margin:8px 0;cursor:pointer;line-height:1.4;}
.pf-check input{margin-top:3px;flex-shrink:0;}
.cap-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:22px;}
.cap-tab{font-family:var(--head);text-transform:uppercase;letter-spacing:.1em;font-size:12px;padding:11px 16px;color:#5c6070;border:none;background:none;border-bottom:2px solid transparent;cursor:pointer;}
.cap-tab:hover{color:var(--navy);}
.cap-tab.active{color:var(--navy);border-bottom-color:var(--gold);}
.cap-panel{display:none;}
.cap-panel.active{display:block;}
.cap-lead{color:#5c6070;margin:0 0 18px;font-size:16px;}
.cap-step{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px;}
.cap-step .cap-n{font-family:var(--head);color:var(--gold);font-size:20px;line-height:1.2;flex-shrink:0;width:24px;}
.cap-step p{margin:0;color:#4a4f5e;font-size:16px;}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.rev{background:#fff;border:1px solid var(--line);border-radius:4px;padding:24px;}
.rev .stars{color:var(--gold);letter-spacing:2px;}
.rev blockquote{margin:12px 0;font-family:var(--body);font-style:italic;font-size:16px;color:var(--navy);line-height:1.55;}
.rev-attr{font-family:var(--head);text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:#64685B;}
.pd-rating.big{display:flex;justify-content:center;gap:8px;align-items:center;font-size:14px;color:var(--gold-deep);margin-top:6px;}
@media(max-width:1000px){.reviews-grid{grid-template-columns:1fr;}}
.lengthopt{cursor:pointer;}
.pd-emosub{font-family:var(--body);font-style:italic;color:var(--gold-deep);font-size:16px;margin:4px 0 6px;}
.emo{background:var(--navy);color:var(--cream);text-align:center;}
.emo .emo-inner{max-width:680px;margin:0 auto;}
.emo h2{color:var(--cream);font-weight:300;font-size:clamp(24px,3vw,34px);margin:12px 0 14px;}
.emo p{color:#c7cce0;font-size:18px;line-height:1.7;}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.blog-card{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--line);border-radius:5px;padding:24px;transition:.25s;cursor:pointer;}
.blog-card:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(15,25,68,.1);}
.blog-card-cat,.blog-cat{font-family:var(--head);text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--gold-deep);}
.blog-card h2{font-size:19px;font-weight:400;line-height:1.28;color:var(--navy);}
.blog-card p{font-size:15.5px;color:#5c6070;margin:0;}
.blog-card-meta{font-family:var(--head);text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:#64685B;margin-top:auto;}
.blog-meta{font-family:var(--head);text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:#64685B;margin-top:6px;}
.blog-body{font-size:17px;line-height:1.75;color:var(--ink);}
.blog-body p{margin:0 0 18px;}
.blog-body h2{font-weight:300;font-size:25px;color:var(--navy);margin:32px 0 12px;}
.blog-body ul{margin:0 0 18px;padding-left:22px;}
.blog-body li{margin-bottom:8px;}
.blog-body .acc{margin-top:8px;}
.blog-body .acc summary{font-family:var(--body);text-transform:none;letter-spacing:0;font-size:16px;}
.blog-cta{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--navy);color:var(--cream);border-radius:6px;padding:24px 28px;margin:30px 0 8px;}
.blog-cta b{font-family:var(--head);text-transform:uppercase;letter-spacing:.1em;font-size:14px;}
.blog-cta p{margin:6px 0 0;color:#c7cce0;font-size:15.5px;}
@media(max-width:1000px){.blog-grid{grid-template-columns:1fr;}}
.pd-gthumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;min-width:0;padding-bottom:3px;scrollbar-width:thin;-webkit-overflow-scrolling:touch;}
.pd-gthumb{flex-shrink:0;width:74px;height:74px;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--photo-bg,#EEEEF0);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:.2s;}
.pd-gthumb.active{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy);}
.pd-gthumb img{width:100%;height:100%;object-fit:contain;padding:6%;}
/* A photograph fills its thumbnail; a cut-out sits inside one with air around
   it. The rule above is right for the front view and wrong for these. */
.pd-gthumb.photo img{object-fit:cover;padding:0;}
.pd-gthumb.slot{flex-direction:column;gap:2px;color:#64685B;}
.pd-gthumb.slot span{font-family:var(--head);text-transform:uppercase;letter-spacing:.05em;font-size:12px;}
.pd-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;height:100%;min-height:200px;background:repeating-linear-gradient(45deg,#faf8f2,#faf8f2 12px,#f3eee0 12px,#f3eee0 24px);border:1px dashed var(--gold);border-radius:4px;color:var(--gold-deep);text-align:center;padding:20px;box-sizing:border-box;}
.pd-slot svg{width:36px;height:36px;}
.pd-slot span{font-family:var(--head);text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--navy);}
.pd-slot small{font-size:12px;color:#64685B;font-style:italic;}
.pd-slot.small{min-height:170px;}
.pd-slot.light{background:rgba(255,255,255,.05);border-color:rgba(200,178,115,.5);}
.pd-slot.light span{color:var(--cream);}
.pd-slot.light small{color:#aeb4d0;}
.pd-slot.white{background:#fff;border-style:solid;border-color:var(--line);padding:0;}
.pd-slot.white img{width:100%;height:100%;object-fit:contain;padding:8%;}
.lightbox{position:fixed;inset:0;background:rgba(15,25,68,.9);z-index:130;display:none;align-items:center;justify-content:center;padding:30px;}
.lightbox.show{display:flex;}
.lightbox-body{max-width:min(720px,92vw);max-height:86vh;background:#fff;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.lightbox-body img,.lightbox-body svg{width:100%;height:auto;max-height:86vh;object-fit:contain;}
.lightbox-body .pd-slot{min-height:320px;width:480px;max-width:80vw;}
.lb-close{position:absolute;top:18px;right:24px;background:none;border:none;color:var(--cream);font-size:26px;cursor:pointer;line-height:1;}
.risk-badges{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin-top:18px;}
.risk{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;color:#4a4f5e;line-height:1.35;}
.risk svg{width:16px;height:16px;color:var(--gold-deep);flex-shrink:0;margin-top:1px;}
.gift-box{border:1.5px solid var(--gold);border-radius:6px;margin-top:18px;background:linear-gradient(160deg,#fff,var(--cream-2));box-shadow:0 6px 18px rgba(200,178,115,.2);}
.pd-gift{margin-top:20px;border:1px solid rgba(200,178,115,.55);border-radius:9px;background:var(--white);}
.pd-gift-h{display:flex;align-items:center;gap:10px;font-family:var(--head);color:var(--navy);font-size:18px;font-weight:400;letter-spacing:.01em;padding:16px 18px 16px 20px;cursor:pointer;list-style:none;user-select:none;transition:color .2s;}
.pd-gift-h::-webkit-details-marker{display:none;}
.pd-gift-h::marker{content:"";}
.pd-gift-h:hover{color:var(--gold-deep);}
.pd-gift-h svg{width:21px;height:21px;color:var(--gold-deep);flex:none;}
.pd-gift-h span{flex:1;}
.pd-gift-h::after{content:"+";flex:none;width:22px;text-align:center;font-family:var(--head);font-size:23px;font-weight:300;line-height:1;color:var(--gold-deep);}
.pd-gift[open] .pd-gift-h::after{content:"\2212";}
.pd-gift[open] .pd-gift-h{padding-bottom:2px;}
.pd-gift-body{padding:0 20px 19px;}
.pd-gift-lead{margin:6px 0 15px;color:var(--ink);font-size:15px;line-height:1.55;}
.pd-gift-steps{list-style:none;margin:0;padding:0;counter-reset:g;}
.pd-gift-steps li{position:relative;padding:0 0 13px 36px;counter-increment:g;}
.pd-gift-steps li:last-child{padding-bottom:0;}
.pd-gift-steps li::before{content:counter(g);position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:var(--gold);color:var(--navy);font-family:var(--head);font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;}
.pd-gift-steps b{display:block;color:var(--navy);font-weight:600;font-size:14.5px;line-height:1.4;}
.pd-gift-steps span{display:block;color:var(--ink);font-size:13.5px;line-height:1.5;margin-top:2px;opacity:.92;}
.pd-gift-foot{margin:15px 0 0;padding-top:13px;border-top:1px solid rgba(200,178,115,.4);font-size:13px;color:var(--gold-deep);font-style:italic;line-height:1.5;}
.gift-box summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:11px;padding:16px 18px;font-family:var(--head);text-transform:uppercase;letter-spacing:.1em;font-size:13.5px;color:var(--navy);}
.gift-box summary::-webkit-details-marker{display:none;}
.gift-box summary svg{width:20px;height:20px;color:var(--gold-deep);}
.gift-box summary em{margin-left:auto;font-style:normal;font-family:var(--head);text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:var(--navy);background:var(--gold);padding:4px 11px;border-radius:20px;}
.gift-body{padding:4px 16px 16px;}
.help-card{display:flex;gap:13px;align-items:flex-start;background:var(--cream-2);border-radius:5px;padding:16px 18px;margin-top:16px;}
.help-card svg{width:22px;height:22px;color:var(--gold-deep);flex-shrink:0;margin-top:2px;}
.help-card b{font-family:var(--head);text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:var(--navy);}
.help-card p{margin:5px 0 0;font-size:15px;color:#4a4f5e;line-height:1.55;}
.help-card a{color:var(--gold-deep);}
.fromprint{display:grid;grid-template-columns:1fr auto 1fr;gap:28px;align-items:center;max-width:740px;margin:0 auto;}
.fp-slot{margin:0;text-align:center;}
.fp-step{display:block;font-family:var(--head);text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:var(--gold-deep);margin-bottom:11px;}
.fp-frame{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:0 14px 34px rgba(15,25,68,.09);}
.fp-frame .pd-slot{border:none;background:#fff;border-radius:9px;padding:0;overflow:hidden;}
.fp-slot figcaption{text-align:center;margin-top:13px;font-family:var(--body);font-style:italic;text-transform:none;letter-spacing:0;font-size:14.5px;color:#5c6070;}
.fp-arrow{width:46px;height:46px;border-radius:50%;background:var(--gold);color:var(--navy);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(200,178,115,.45);}
.fp-arrow svg{width:21px;height:21px;}
.emo-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;max-width:980px;margin:0 auto;text-align:left;}
.emo-photo .pd-slot{min-height:240px;}
.ugc-head{display:flex;align-items:center;gap:12px;margin:40px 0 16px;}
.ugc-tag{font-family:var(--head);letter-spacing:.1em;font-size:12px;color:var(--gold-deep);}
.ugc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;}
.ugc-tile img{display:block;width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;border-radius:10px;background:var(--cream);}
.ugc-tile .pd-slot{min-height:120px;padding:10px;}
.ugc-tile .pd-slot svg{width:24px;height:24px;}
.ugc-tile .pd-slot span{font-size:12px;}
.ugc-tile .pd-slot small{display:none;}
.video-wrap{position:relative;width:100%;padding-top:56.25%;border-radius:6px;overflow:hidden;background:#0b1230;}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
/* The good-and-bad print gallery in the fingerprint guide. The tick and the
   crosses are part of the artwork, not something drawn here, so the captions
   only have to say WHY. */
.pg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px 18px;margin:26px 0 30px;}
.pg-item{margin:0;text-align:center;}
.pg-item img{width:100%;max-width:150px;height:auto;display:block;margin:0 auto 10px;}
.pg-item figcaption{font-size:13.5px;line-height:1.5;color:#6a6f7e;}
.pg-good figcaption{color:var(--navy);}
/* A screenshot in a guide has to be legible, which the print-example
   thumbnails deliberately are not. Same family, different job. */
.pg-wide{margin:26px 0 30px;}
.pg-wide img{width:100%;display:block;border:1px solid var(--line);border-radius:4px;}
.pg-wide figcaption{font-family:var(--head);font-size:13px;color:#6a6f7e;margin-top:9px;}

/* ---- Document reader (brochure, flyers, training guides) ------------------------------ */
.bv-wrap{background:var(--cream,#f4efe6);padding:30px 0 46px;}
.bv-head{text-align:center;margin:0 0 14px;}
.bv-head .eyebrow{color:var(--gold-deep,#9a7b2f);}
.bv-head h1{color:var(--navy);font-weight:300;font-size:30px;margin:6px 0 0;}
.bv-lede{color:#4a4f5e;max-width:520px;margin:14px auto 0;line-height:1.7}
.bv-stage{perspective:2400px;display:flex;justify-content:center;padding:0 16px;}
.bv-stage.is-zoom{overflow-x:auto;justify-content:flex-start;}
.bv-book{position:relative;display:flex;gap:0;transform-style:preserve-3d;box-shadow:0 22px 50px rgba(26,36,80,.22);max-width:100%;margin:0 auto;}
.bv-book.is-single{box-shadow:none;}
/* Sized to the screen's height, so a whole spread is in view below the controls. */
.bv-page{width:min(40vw,calc((100vh - 230px) * var(--bv-ratio,0.705)),560px);aspect-ratio:var(--bv-ratio,1551/2200);background:#fff;position:relative;overflow:hidden;}
.bv-page.solo{box-shadow:0 22px 50px rgba(26,36,80,.22);}
.bv-page img{width:100%;height:100%;display:block;object-fit:contain;background:#fff;cursor:zoom-in;}
.bv-book.is-zoom{max-width:none;}
.bv-book.is-zoom .bv-page{width:min(48vw,1100px);}
.bv-book.is-zoom.is-single .bv-page{width:min(90vw,1100px);}
/* The gutter shadow, so two pages read as one open book. */
.bv-page.left::after,.bv-page.right::after{content:'';position:absolute;top:0;bottom:0;width:26px;pointer-events:none;}
.bv-page.left::after{right:0;background:linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,.18));}
.bv-page.right::after{left:0;background:linear-gradient(to left,rgba(0,0,0,0),rgba(0,0,0,.18));}
/* The turning leaf. */
.bv-leaf{position:absolute;top:0;height:100%;width:50%;transform-style:preserve-3d;
  transition:transform .62s cubic-bezier(.4,.05,.25,1);z-index:5;}
.bv-leaf.fwd{left:50%;transform-origin:left center;}
.bv-leaf.back{right:50%;transform-origin:right center;}
.bv-leaf.fwd.turn{transform:rotateY(-180deg);}
.bv-leaf.back.turn{transform:rotateY(180deg);}
.bv-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff;}
.bv-face img{width:100%;height:100%;object-fit:contain;display:block;}
.bv-face.b{transform:rotateY(180deg);}
.bv-bar{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 18px;flex-wrap:wrap;}
.bv-nav{background:#fff;border:1px solid rgba(26,36,80,.25);color:var(--navy);width:44px;height:44px;
  border-radius:50%;cursor:pointer;font-size:17px;line-height:1;transition:.2s;}
.bv-nav:hover:not(:disabled){background:var(--navy);color:#fff;}
.bv-nav:disabled{opacity:.3;cursor:default;}
.bv-count{color:var(--navy);font-size:14px;letter-spacing:.08em;min-width:118px;text-align:center;}
.bv-dl{display:inline-block;padding:11px 20px;border:1px solid var(--navy);color:var(--navy);background:transparent;cursor:pointer;
  text-decoration:none;font-family:var(--head);letter-spacing:.14em;text-transform:uppercase;font-size:12px;}
.bv-dl:hover{background:var(--navy);color:#fff;}
.bv-back{margin-right:auto;}
.pw-wrap{position:relative;}
.pw-wrap input{padding-right:72px;width:100%;}
.pw-show{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:0;padding:6px 8px;cursor:pointer;
  font:600 12px/1 var(--sans,inherit);letter-spacing:.06em;text-transform:uppercase;color:var(--navy);}
.bv-hint{text-align:center;color:#6b6f7c;font-size:13px;margin:16px 0 0;}
.bv-full{position:fixed;inset:0;z-index:4000;background:rgba(20,26,50,.88);overflow:auto;display:flex;justify-content:center;align-items:flex-start;padding:24px;cursor:zoom-out;}
.bv-full img{max-width:min(1100px,100%);height:auto;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.4);}
.bv-full-x{position:fixed;top:14px;right:18px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:var(--navy);font-size:26px;cursor:pointer;}
@media(max-width:760px){
  .bv-leaf{display:none;}
  .bv-stage{padding:0 10px;}
  .bv-page{width:calc((100vw - 20px) / 2);}
  .bv-book.is-single .bv-page{width:min(80vw,420px);}
  .bv-zoom{display:none;}
}

.video-wrap video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;background:#0b1230;}
/* The workshop film's own controls: pause, and a timeline to move through it. On a
   touch screen they stay visible; with a mouse they appear when the pointer is over
   the film, so the film is not covered while it is simply being watched. */
.vid-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;padding:22px 16px 12px;background:linear-gradient(to top,rgba(11,18,48,.72),rgba(11,18,48,0));opacity:1;transition:opacity .25s;}
@media(hover:hover){.video-wrap:not(:hover) .vid-bar.playing{opacity:0;}}
.vid-play{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid rgba(246,243,234,.7);background:rgba(11,18,48,.35);color:#F6F3EA;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
.vid-play svg{width:16px;height:16px;fill:currentColor;}
.vid-play .i-play{display:none;}
.vid-bar.paused .vid-play .i-play{display:block;}
.vid-bar.paused .vid-play .i-pause{display:none;}
.vid-play:focus-visible,.vid-seek:focus-visible{outline:2px solid #C8B273;outline-offset:2px;}
.vid-seek{flex:1;min-width:0;height:4px;accent-color:#C8B273;cursor:pointer;}
/* Sound. The film starts muted, because browsers will not start one with sound by
   themselves; this turns it on. Labelled in words as well as the icon, so it is
   plain that the film has sound to turn on. */
.vid-sound{flex:none;display:flex;align-items:center;gap:6px;height:34px;padding:0 12px 0 10px;border-radius:17px;border:1px solid rgba(246,243,234,.7);background:rgba(11,18,48,.35);color:#F6F3EA;cursor:pointer;font-family:var(--head);font-size:12px;letter-spacing:.04em;}
.vid-sound svg{width:17px;height:17px;fill:currentColor;}
.vid-sound .i-sound{display:none;}
.vid-bar.sound-on .vid-sound .i-sound{display:block;}
.vid-bar.sound-on .vid-sound .i-muted{display:none;}
.vid-sound:focus-visible{outline:2px solid #C8B273;outline-offset:2px;}
/* While the sound is on, the controls stay in view, so it can always be turned off again. */
@media(hover:hover){.video-wrap:not(:hover) .vid-bar.playing.sound-on{opacity:1;}}
.vid-time{flex:none;font-family:var(--head);font-size:12px;letter-spacing:.04em;color:#F6F3EA;font-variant-numeric:tabular-nums;}
@media(max-width:560px){.vid-time{display:none;}}

.foot-news{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:26px 0;border-bottom:1px solid #25315f;}
.foot-news h4{font-family:var(--head);text-transform:uppercase;letter-spacing:.18em;font-size:13px;color:var(--gold);margin:0 0 4px;}
.foot-news p{margin:0;font-size:15px;color:#9aa0c0;}
.news-form{display:flex;gap:10px;flex-wrap:wrap;}
.news-form input{padding:12px 14px;border:1px solid #2a3768;background:#16224f;color:var(--cream);border-radius:2px;font-family:var(--body);font-size:16px;min-width:240px;}
.news-form input::placeholder{color:#6b73a0;}
@media(max-width:1000px){.fromprint{grid-template-columns:1fr;justify-items:center;}.fp-arrow{transform:rotate(90deg);justify-self:center;}.emo-grid{grid-template-columns:1fr;gap:24px;}.ugc-grid{grid-template-columns:repeat(3,1fr);}.risk-badges{grid-template-columns:1fr;}}
/* Three of these pictures across is more than the narrowest phone has room for. */
@media(max-width:480px){.ugc-grid{grid-template-columns:repeat(2,1fr);}}
.hiw-video{max-width:880px;margin:0 auto 20px;}
.hiw-video .video-wrap{box-shadow:0 24px 52px rgba(15,25,68,.18);}
.hiw-video-cap{text-align:center;font-size:14.5px;color:#6a6f7e;margin:14px 0 0;letter-spacing:.01em;}
.hiw-video-cap b{font-family:var(--head);font-weight:400;color:var(--navy);}
.hiw-wrapline{display:flex;align-items:center;gap:18px;max-width:880px;margin:44px auto 40px;}
.hiw-wrapline::before,.hiw-wrapline::after{content:"";flex:1;height:1px;background:var(--line);}
.hiw-wrapline span{font-family:var(--head);text-transform:uppercase;letter-spacing:.22em;font-size:12px;color:var(--gold-deep);}
.help-band{background:var(--cream-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:0;}
.help-band .wrap{padding-top:35px;padding-bottom:35px;}
.help-band-inner{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;text-align:center;}
.help-band-inner>svg{width:24px;height:24px;color:var(--gold-deep);}
.help-band-inner b{font-family:var(--head);text-transform:uppercase;letter-spacing:.1em;font-size:13px;color:var(--navy);}
/* On a phone the heading and the sentence ran together and the heading read as the first
   few words of the sentence. On a wider screen there is room for them on one line, which is
   where they were. */
@media(max-width:768px){
  .help-band-inner b{display:block;margin-bottom:5px;}
}
.help-band-inner span{font-size:18px;color:#4a4f5e;}
.help-band-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:center;}
.help-band-actions a:first-child{font-family:var(--head);font-size:14px;color:var(--navy);}
.gift-lead{font-size:15.5px;color:#4a4f5e;margin:0 0 12px;line-height:1.55;}
@media(max-width:1000px){.hiw-video{margin-bottom:14px;}.hiw-wrapline{margin:34px auto 30px;}}
@media(max-width:600px){.qtyrow{flex-direction:column;align-items:stretch;}.qtyrow .qty{align-self:flex-start;}}
.fromprint .fp-slot{max-width:250px;width:100%;margin:0 auto;}
.fromprint .pd-slot.small{min-height:190px;}
.emo-img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px;display:block;}
.account-auth{background:var(--cream-2);}
.account-auth .ta-card{background:#fff;color:var(--ink);border:1px solid var(--line);border-top:3px solid var(--gold);box-shadow:0 18px 44px rgba(15,25,68,.1);}
.account-auth .ta-card h2{color:var(--navy);}
.account-auth .ta-sub{color:#5c6070;}
.account-auth .ta-card .field label{color:var(--navy);}
.account-auth .ta-card .field input{background:#fff;border:1px solid var(--line);color:var(--ink);}
.account-auth .ta-card .field input::placeholder{color:#b4af9c;}
.account-auth .ta-row{color:#5c6070;}
.account-auth .ta-check{color:#5c6070;}
.account-auth .ta-forgot{color:var(--gold-deep);}
.account-auth .ta-secure{color:#64685B;}
.account-auth .ta-apply{color:#5c6070;border-top-color:var(--line);}
.account-auth .ta-apply a{color:var(--gold-deep);}
.account-auth .ta-customer{background:var(--cream);}
.brand-lockup{min-width:0;}
@media(max-width:768px){.brand-lockup .wordmark{font-size:14px;letter-spacing:.075em;}.header-icons{gap:15px;}}
/* The name beside the mark fits with room to spare down to 480, so it is only dropped below
   that, where the menu button, the mark and the three icons need the whole width. */
@media(max-width:480px){.brand-lockup .wordmark{display:none;}.header-icons{gap:13px;}.brand-lockup img{height:40px;}}
.dropdown .dd-group{padding-bottom:4px;}
.dropdown .dd-group+.dd-group{border-top:1px solid var(--line);margin-top:6px;padding-top:8px;}
.dropdown .dd-link{display:block;padding:8px 12px;border-radius:4px;font-family:var(--head);text-transform:none;letter-spacing:.02em;font-size:13.5px;color:var(--navy);transition:.15s;}
.dropdown .dd-link:hover{background:var(--cream);color:var(--gold-deep);}
.dropdown .dd-link.dd-allp{color:var(--gold-deep);font-size:12.5px;}

/* ============ LOCKET STUDIO ============ */
/* The narrow settings for these cards live below, after the rule they have to override.
   They used to sit above it, where they never took effect at all. */






.pd-showcase{background:var(--cream);border-top:1px solid var(--line);}
.sc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.sc-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px 18px 20px;text-align:center;transition:box-shadow .2s,border-color .2s,transform .2s;}
.sc-card:hover{border-color:var(--gold);box-shadow:0 14px 32px rgba(15,25,68,.09);transform:translateY(-3px);}
.sc-num{position:absolute;top:14px;left:15px;width:25px;height:25px;border-radius:50%;background:var(--cream);color:var(--gold-deep);border:1px solid var(--gold);font-family:var(--head);font-size:12px;display:flex;align-items:center;justify-content:center;}
.sc-media{display:flex;justify-content:center;align-items:center;gap:10px;min-height:64px;margin:4px 0 14px;}
.sc-thumb{width:56px;height:56px;}
.sc-thumb img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 9px rgba(15,25,68,.16));}
.sc-swrow{display:inline-flex;gap:9px;}
.sc-swatch{width:30px;height:30px;border-radius:50%;box-shadow:0 2px 5px rgba(15,25,68,.16),0 0 0 1px rgba(0,0,0,.06) inset;}
.sc-gem{width:22px;height:22px;border-radius:50%;box-shadow:0 2px 6px rgba(15,25,68,.22),0 0 0 1px rgba(255,255,255,.5) inset;}
.sc-card h4{font-family:var(--head);font-size:15px;color:var(--navy);margin:0 0 5px;letter-spacing:.01em;}
.sc-card p{font-size:13px;color:#64685B;line-height:1.45;}
.sc-band{margin-top:20px;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:22px 26px;text-align:center;}
.sc-band .sc-band-t{font-family:var(--head);font-size:18px;color:var(--navy);margin:0 0 6px;letter-spacing:.01em;}
.sc-band p{font-size:15.5px;color:#6c7160;line-height:1.55;margin:0 auto;max-width:66ch;}
.sc-cta{text-align:center;margin-top:24px;}
.sc-cta-note{font-size:12.5px;color:#64685B;margin-top:12px;}
@media(max-width:1000px){.sc-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.sc-grid{gap:12px;}.sc-card{padding:16px 12px;}.sc-row{min-height:48px;}.sc-thumb{width:44px;height:44px;}}
/* Two of these cards will not sit side by side on the narrowest phone, and forcing them to
   was what pushed the product page sideways at 320. */
@media(max-width:480px){.sc-grid{grid-template-columns:1fr;}}
.sc-layer{margin-top:22px;text-align:center;font-size:14px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px 18px;line-height:1.5;}
.sc-layer b{color:var(--navy);}

/* ===== TRADE PORTAL (scoped to #tp) ===== */
body.is-trade #announce{display:none;}
body.is-trade #site{display:none;}
body.is-trade #foot{display:none;}
body.is-trade #app{padding:0;}
#tp section{padding:0;}
#tp button{font-family:var(--head);}
#tp table{border-collapse:collapse;}
/* The portal used to hold its own copy of twenty of these names, several a shade or two
   away from the same name in the shop. It now takes them from tokens.css like everything
   else, and keeps only the one measurement that belongs to it alone. */
#tp{--sidebar:272px;}
#tp *{box-sizing:border-box}
#tp{-webkit-text-size-adjust:100%}
#tp{margin:0;font-family:var(--head);color:var(--ink);background:var(--cream);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
#tp h1,
#tp h2,
#tp h3,
#tp h4{font-family:var(--head);color:var(--navy);font-weight:500;margin:0}
#tp a{color:inherit}
#tp :focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}
#tp .tp-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--head);font-size:15px;font-weight:500;padding:12px 20px;min-height:46px;border-radius:8px;border:1.5px solid transparent;cursor:pointer;transition:.14s;background:none;text-decoration:none;white-space:nowrap}
#tp .tp-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#tp .tp-btn-gold{background:var(--gold);color:var(--navy);border-color:var(--gold)}
#tp .tp-btn-gold:hover{background:#d6c188;border-color:#d6c188}
#tp .tp-btn-navy{background:var(--navy);color:#fff;border-color:var(--navy)}
#tp .tp-btn-navy:hover{background:var(--navy-2);border-color:var(--navy-2)}
#tp .tp-btn-line{background:#fff;border-color:var(--line);color:var(--navy)}
#tp .tp-btn-line:hover{border-color:var(--navy);background:var(--cream-3)}
#tp .tp-btn-sm{padding:9px 14px;min-height:38px;font-size:14px;border-radius:7px}
#tp .tp-btn-block{display:flex;width:100%}
#tp .tp-topbar{background:var(--navy);color:#fff;position:sticky;top:0;z-index:50}
#tp .tp-topbar-in{display:flex;align-items:center;gap:20px;height:66px;padding:0 26px}
#tp .tp-burger{display:none;background:none;border:1.5px solid rgba(255,255,255,.3);border-radius:8px;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer}
#tp .tp-burger svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round}
#tp .tp-brand{display:flex;align-items:center;gap:12px;font-family:var(--head);letter-spacing:.075em;font-size:15px;font-weight:500;width:calc(var(--sidebar) - 26px)}
#tp .tp-brand .tp-logo{width:34px;height:34px;object-fit:contain;flex:none}
#tp .tp-brand{color:#fff;text-decoration:none}
#tp .tp-brand .tp-rmark{width:32px;height:32px;border:1.5px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:14px;letter-spacing:0;flex:none}
#tp .tp-top-portal{font-family:var(--head);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
#tp .tp-top-search{margin-left:auto;position:relative}
#tp .tp-top-search input{background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.2);color:#fff;border-radius:8px;padding:11px 16px 11px 42px;font-family:var(--head);font-size:15px;width:300px;transition:.14s}
#tp .tp-top-search input::placeholder{color:#b9bfd6}
#tp .tp-top-search input:focus{outline:2px solid #0F1944;outline-offset:3px;border-color:var(--gold);background:rgba(255,255,255,.15);width:360px}
#tp .tp-top-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;stroke:#b9bfd6;fill:none;stroke-width:2}
#tp .tp-top-acct{display:flex;align-items:center;gap:12px}
#tp .tp-top-avatar{width:40px;height:40px;border-radius:50%;background:var(--gold);color:var(--navy);display:flex;align-items:center;justify-content:center;font-family:var(--head);font-weight:600;font-size:15px}
#tp .tp-top-acct .tp-who{font-size:14px;line-height:1.3}
#tp .tp-top-acct .tp-who b{font-weight:500}
#tp .tp-top-acct .tp-who small{color:#b9bfd6;font-size:12.5px}
#tp .tp-top-logout{color:#b9bfd6;font-size:13px;cursor:pointer;margin-left:6px;padding:10px 12px;border-radius:7px}
#tp .tp-top-logout:hover{color:#fff;background:rgba(255,255,255,.1)}
#tp .tp-shell{display:flex;align-items:flex-start;min-height:calc(100vh - 100px);background:linear-gradient(90deg,var(--navy) 0 var(--sidebar),var(--cream) var(--sidebar))}
#tp .tp-side{width:var(--sidebar);flex:none;background:var(--navy);color:#e3e7f2;align-self:stretch;position:sticky;top:66px;height:calc(100vh - 66px);overflow-y:auto;padding:18px 14px 26px;z-index:45}
/* Studio mode: the account nav, the sections and the order search all stand down,
   and the starting points take their place. */
#tp.tp-studio-mode .tp-nav-label,
#tp.tp-studio-mode .tp-nav,
#tp.tp-studio-mode .tp-side-foot,
#tp.tp-studio-mode .tp-top-search{display:none}
/* the search was what pushed the account to the right, so in Studio mode the account does it itself */
#tp.tp-studio-mode .tp-top-acct{margin-left:auto}
#tp.tp-studio-mode .tp-nav-label.tp-side-lbl{display:block}
#tp.tp-account-mode .tp-studio-main{display:none}
#tp .tp-studio-side{margin-bottom:16px}
#tp .tp-side-acct{padding:0 4px 14px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:14px}
#tp .tp-side-acct-l{display:block;font-family:var(--head);text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:var(--gold)}
#tp .tp-side-acct b{display:block;font-size:14.5px;color:#fff;margin-top:5px;line-height:1.3}
#tp .tp-side-acct-n{display:block;font-size:12px;color:#a7aec9;margin-top:2px;letter-spacing:.08em}
#tp .tp-side-starts{display:flex;flex-direction:column;gap:5px;margin-bottom:18px}
#tp .tp-side-start{display:block;width:100%;text-align:left;border:1px solid rgba(255,255,255,.14);background:transparent;color:#dfe4f2;border-radius:8px;padding:9px 11px;font-family:var(--body);font-size:13px;cursor:pointer;transition:.15s}
#tp .tp-side-start:hover{border-color:var(--gold);color:#fff}
#tp .tp-side-start.picked{background:var(--gold);border-color:var(--gold);color:var(--navy);font-weight:600}
#tp .tp-studio-main{max-width:1080px}
#tp .tp-studio-head{margin-bottom:26px}
#tp .tp-studio-head .tp-eyebrow{font-family:var(--head);text-transform:uppercase;letter-spacing:.24em;font-size:12px;color:var(--gold-deep)}
#tp .tp-studio-head h1{font-family:var(--head);font-weight:300;font-size:32px;color:var(--navy);margin:9px 0 8px}
#tp .tp-studio-head p{font-size:15px;color:#5c6070;line-height:1.6;max-width:60ch;margin:0}
#tp .tp-start-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:14px}
/* the way into the library, above the tiles it changes */
#tp .tp-lib-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
#tp .tp-lib-bar-n{font-size:13.5px;color:#64685B}
#tp .tp-lib-open{display:inline-flex;align-items:center;gap:9px}
#tp .tp-lib-open svg{width:18px;height:18px;flex:none}
/* the library */
#tp .tp-lib-back{display:inline-flex;align-items:center;gap:6px;background:none;border:none;padding:6px 0;margin-bottom:10px;color:var(--navy);font-family:var(--body);font-size:14px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
#tp .tp-lib-head{display:flex;flex-direction:column;align-items:flex-start}
#tp .tp-lib-back svg{width:16px;height:16px}
#tp .tp-lib-new{display:flex;align-items:center;gap:16px;flex-wrap:wrap;border:1px dashed var(--line);border-radius:14px;background:#fff;padding:18px 20px;margin-bottom:20px}
#tp .tp-lib-new span{font-size:13.5px;color:#5c6070;line-height:1.55;max-width:52ch}
/* Every card is the same height and the buttons sit on one line across the row, however much
   or little each template decides. */
#tp .tp-lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;align-items:stretch}
#tp .tp-lib-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;background:#fff;padding:18px 20px 16px}
#tp .tp-lib-h{display:flex;align-items:center;justify-content:space-between;gap:14px}
#tp .tp-lib-card h2{font-family:var(--head);font-weight:400;font-size:19px;color:var(--navy);margin:0}
#tp .tp-lib-tog{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px 6px 7px;font-family:var(--body);font-size:12.5px;color:#5c6070;cursor:pointer;min-height:32px}
#tp .tp-lib-tog-b{width:19px;height:19px;border-radius:6px;border:1.5px solid #c3c7d2;display:flex;align-items:center;justify-content:center;color:transparent;flex:none}
#tp .tp-lib-tog-b svg{width:12px;height:12px}
#tp .tp-lib-tog.on{border-color:var(--gold-deep);color:var(--navy)}
#tp .tp-lib-tog.on .tp-lib-tog-b{background:var(--gold-deep);border-color:var(--gold-deep);color:#fff}
#tp .tp-lib-sets,#tp .tp-lib-card .tp-lib-open{font-size:13.5px;color:#5c6070;line-height:1.55;margin:12px 0 0;display:block}
#tp .tp-lib-tog{white-space:nowrap}
#tp .tp-lib-card h2{min-width:0}
#tp .tp-lib-sets b,#tp .tp-lib-card .tp-lib-open b{color:var(--navy);font-weight:600;margin-right:4px}
#tp .tp-lib-acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:16px}
#tp .tp-lib-acts .btn{padding:9px 16px;font-size:13px}
#tp .tp-lib-del{background:none;border:none;padding:6px 4px;color:#9A3412;font-family:var(--body);font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
#tp .tp-lib-sure{font-size:13px;color:var(--navy);display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
#tp .tp-lib-yes,#tp .tp-lib-no{background:none;border:none;padding:6px 4px;font-family:var(--body);font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
#tp .tp-lib-yes{color:#9A3412}
#tp .tp-lib-no{color:var(--navy)}
#tp .tp-lib-empty{border:1px dashed var(--line);border-radius:14px;background:#fff;padding:26px;font-size:15px;color:var(--navy)}
#tp .tp-lib-empty span{display:block;font-size:13.5px;color:#5c6070;margin-top:6px;line-height:1.55}
#tp .tp-start{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;border:1.5px solid var(--line);border-radius:14px;background:#fff;padding:16px 12px 15px;cursor:pointer;transition:.16s;font-family:var(--body)}
#tp .tp-start:hover{border-color:var(--gold);box-shadow:0 12px 26px rgba(15,25,68,.09);transform:translateY(-2px)}
#tp .tp-start.picked{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft,#e9dcbb)}
#tp .tp-start-art{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:var(--cream);border-radius:10px;overflow:hidden}
#tp .tp-start-art img{width:100%;height:100%;object-fit:contain}
/* The four we ship with are photographed on their chain, with air around them. A piece drawn
   from a configuration is a tight crop of the pendant alone, so it is inset to sit at about
   the same size on the tile rather than filling it corner to corner. */
#tp .tp-start-art img.tp-start-raw{padding:19%;box-sizing:border-box}
#tp .tp-start-blank .tp-start-art{color:var(--gold-deep)}
#tp .tp-start-blank .tp-start-art svg{width:34px;height:34px}
#tp .tp-start-t b{display:block;font-family:var(--head);font-size:14px;color:var(--navy);line-height:1.3}
#tp .tp-start-t small{display:block;font-size:12px;color:#64685B;line-height:1.45;margin-top:3px}
#tp .tp-start-tick{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;background:var(--gold);color:#fff;display:none;align-items:center;justify-content:center}
#tp .tp-start-tick svg{width:13px;height:13px}
#tp .tp-start.picked .tp-start-tick{display:flex}
#tp .tp-start-cta{margin-top:26px;text-align:center}
#tp .tp-start-cta .btn[aria-disabled="true"]{opacity:.42}
#tp .tp-start-note{font-size:13px;color:#64685B;margin-top:11px}
@media(max-width:1240px){#tp .tp-start-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){#tp .tp-start-grid{grid-template-columns:repeat(2,1fr)}#tp .tp-studio-head h1{font-size:26px}}
#tp .tp-side-primary{background:var(--gold);color:var(--navy);border:none;border-radius:10px;padding:15px 16px;width:100%;min-height:60px;cursor:pointer;text-align:left;display:flex;align-items:center;gap:12px;text-decoration:none;transition:.14s;margin-bottom:8px}
#tp .tp-side-primary:hover{background:#d6c188}
#tp .tp-side-primary .tp-sp-ic{width:36px;height:36px;border-radius:8px;background:rgba(15,25,68,.14);display:flex;align-items:center;justify-content:center;flex:none}
#tp .tp-side-primary .tp-sp-ic svg{width:21px;height:21px;stroke:var(--navy);fill:none;stroke-width:2.1;stroke-linecap:round}
#tp .tp-side-primary b{font-size:16px;font-weight:600;display:block;line-height:1.25}
#tp .tp-side-primary small{font-size:13px;color:#4d431f}
#tp .tp-side-studio{background:var(--gold);color:var(--navy);border-radius:10px;padding:15px 16px;width:100%;min-height:60px;display:flex;align-items:center;gap:12px;text-decoration:none;transition:.14s;margin-bottom:14px}
#tp .tp-side-studio:hover{background:#d6c188}
#tp .tp-side-studio .tp-sp-ic{width:36px;height:36px;border-radius:8px;background:rgba(15,25,68,.14);display:flex;align-items:center;justify-content:center;flex:none}
#tp .tp-side-studio .tp-sp-ic svg{width:21px;height:21px;stroke:var(--navy);fill:none;stroke-width:2.1;stroke-linecap:round}
#tp .tp-side-studio b{font-size:16px;font-weight:600;display:block;line-height:1.25;text-transform:uppercase;letter-spacing:.06em}
#tp .tp-side-studio small{font-size:13px;color:#4d431f}
#tp .tp-btn-studio{text-transform:uppercase;letter-spacing:.08em}
#tp .tp-kpi-go{text-align:left;font:inherit;cursor:pointer;transition:border-color .14s,box-shadow .14s}
#tp .tp-kpi-go:hover{border-color:var(--gold);box-shadow:0 6px 18px rgba(15,25,68,.08)}
#tp .tp-kpi-go:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
#tp .tp-kpi-go small::after{content:' →';color:var(--gold)}
#tp .tp-loading{color:var(--muted);text-align:center;padding:28px}
#tp .tp-olink{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer;display:block}
#tp .tp-olink:hover b,#tp .tp-omono .tp-olink:hover{text-decoration:underline;text-underline-offset:3px}
#tp .tp-olink:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:3px}
#tp .tp-more{color:var(--muted);font-weight:400}
#tp .tp-os-closed{background:#eceef3;color:#5b6177}
#tp .tp-ph-wrap{flex-wrap:wrap}
#tp .tp-ord-grid{align-items:start}
#tp .tp-ord-pics{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 8px}
#tp .tp-ord-pic{display:block;width:150px;height:150px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#f6f3ec}
#tp .tp-ord-pic img{width:100%;height:100%;object-fit:contain;display:block}
.tp-sheet .tp-ord-pics{display:flex;gap:10px;margin:0 0 18px}
.tp-sheet .tp-ord-pic{display:block;width:96px;height:96px;border:1px solid #e3ddcf;border-radius:8px;overflow:hidden;background:#f6f3ec}
.tp-sheet .tp-ord-pic img{width:100%;height:100%;object-fit:contain}
#tp .tp-item{border-top:1px solid var(--line);padding:14px 0}
#tp .tp-item:first-of-type{border-top:0}
#tp .tp-item-minor{opacity:.75}
#tp .tp-item-h{display:flex;justify-content:space-between;gap:12px;font-size:15.5px;color:var(--navy)}
#tp .tp-item-facts{display:grid;grid-template-columns:max-content 1fr;gap:4px 16px;margin:8px 0 0;font-size:14.5px}
#tp .tp-item-facts dt{color:var(--muted)}
#tp .tp-item-facts dd{margin:0;color:var(--ink,#1b2444)}
#tp .tp-parcels{list-style:none;margin:0;padding:0}
#tp .tp-parcels li{padding:10px 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline}
#tp .tp-parcels li:first-child{border-top:0}
#tp .tp-parcels small{flex-basis:100%;color:var(--muted)}
#tp .tp-shop-row{display:grid;grid-template-columns:56px 1fr auto 76px auto;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
#tp .tp-shop-row:first-of-type{border-top:0}
#tp .tp-shop-img{width:56px;height:56px;border-radius:8px;overflow:hidden;background:#f6f3ec;display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
#tp .tp-shop-img img{width:100%;height:100%;object-fit:cover}
#tp .tp-shop-img-x svg{width:24px;height:24px;stroke:var(--gold);fill:none;stroke-width:1.6}
#tp .tp-shop-t b{display:block;color:var(--navy);font-size:15.5px}
#tp .tp-shop-t small{color:var(--muted);font-size:13.5px}
#tp .tp-shop-p{font-weight:600;color:var(--navy);white-space:nowrap}
#tp .tp-shop-q input{width:70px;padding:9px 8px;border:1.5px solid var(--line);border-radius:8px;font:inherit;text-align:center}
#tp .tp-shop-row-sz{grid-template-columns:56px 1fr auto auto 76px auto}
#tp .tp-shop-sz select{padding:9px 10px;border:1.5px solid var(--line);border-radius:8px;font:inherit;background:#fff;color:var(--navy)}
#tp .tp-shop-img img[src*="slider-bead"]{object-fit:contain;padding:6px}
@media (max-width:760px){
  #tp .tp-shop-row,#tp .tp-shop-row-sz{grid-template-columns:48px 1fr auto;}
  #tp .tp-shop-sz{grid-column:2}
  #tp .tp-shop-q{grid-column:2}
  #tp .tp-shop-row .tp-btn{grid-column:3}
}
/* ---- On a phone: the tables become one card per row, and nothing is wider than the screen ---- */
@media (max-width:760px){
  #tp .tp-tablewrap:has(#tpOrdBody),#tp .tp-tablewrap:has(#tpLiveBody),#tp .tp-tablewrap:has(#tpFamBody){margin:0;overflow:visible}
  #tp .tp-otable:has(#tpOrdBody) thead,#tp .tp-otable:has(#tpLiveBody) thead,#tp .tp-otable:has(#tpFamBody) thead{display:none}
  #tp .tp-otable:has(#tpOrdBody),#tp .tp-otable:has(#tpLiveBody),#tp .tp-otable:has(#tpFamBody){min-width:0}
  #tp .tp-otable:has(#tpOrdBody),#tp .tp-otable:has(#tpLiveBody),#tp .tp-otable:has(#tpFamBody),
  #tp #tpOrdBody,#tp #tpLiveBody,#tp #tpFamBody{display:block;width:100%;min-width:0}
  #tp #tpOrdBody tr,#tp #tpLiveBody tr,#tp #tpFamBody tr{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:14px 4px;border-top:1px solid var(--line);align-items:center}
  #tp #tpOrdBody tr:first-child,#tp #tpLiveBody tr:first-child,#tp #tpFamBody tr:first-child{border-top:0}
  #tp #tpOrdBody td,#tp #tpLiveBody td,#tp #tpFamBody td{display:block;padding:0;border:0;background:none;grid-column:1/-1;text-align:left}
  #tp #tpOrdBody td.tp-omono,#tp #tpLiveBody td.tp-omono{grid-column:1;grid-row:1;font-size:13px;color:var(--muted)}
  #tp #tpOrdBody td.tp-oact,#tp #tpLiveBody td.tp-oact,#tp #tpFamBody td.tp-oact{grid-column:2;grid-row:1;justify-self:end}
  #tp #tpFamBody td.tp-ofam{grid-column:1;grid-row:1}
  #tp #tpOrdBody td.tp-onum,#tp #tpOrdBody td.tp-ocomm{grid-column:auto;font-size:14px}
  #tp #tpOrdBody td.tp-onum::before{content:'Value ';color:var(--muted)}
  #tp #tpOrdBody td.tp-ocomm::before{content:'Commission ';color:var(--muted)}
  #tp #tpFamBody td.tp-onum::before{content:'Pieces ';color:var(--muted)}
  #tp #tpOrdBody td.tp-oeta,#tp #tpLiveBody td.tp-oeta,#tp #tpFamBody td.tp-oeta{font-size:13.5px}
  #tp #tpOrdBody td[colspan],#tp #tpLiveBody td[colspan],#tp #tpFamBody td[colspan]{grid-column:1/-1;text-align:center}
  #tp #tpComMonths .tp-otable{min-width:0}
  #tp #tpComMonths .tp-tablewrap{margin:0}
  #tp #tpComMonths .tp-otable th,#tp #tpComMonths .tp-otable td{padding:10px 6px;font-size:13.5px;white-space:normal}
  #tp .tp-ord-pic{width:120px;height:120px}
  #tp .tp-item-facts{grid-template-columns:1fr;gap:0}
  #tp .tp-item-facts dd{margin:0 0 6px}
  #tp .tp-ph-actions{width:100%;flex-wrap:wrap}
  #tp .tp-ph-actions .tp-btn{flex:1 1 auto;justify-content:center}
  #tp .tp-kpi{padding:14px 14px}
  #tp .tp-kpi small{font-size:11px}
  #tp .tp-kpi span{font-size:12.5px;line-height:1.45}
}
#tp .tp-stack .tp-btn{white-space:normal;overflow-wrap:anywhere;text-align:center;height:auto;min-height:44px}
.tp-smp{position:fixed;inset:0;z-index:1000;background:rgba(15,25,68,.55);display:none;align-items:center;justify-content:center;padding:16px}
.tp-smp.show{display:flex}
.tp-smp-card{background:#f6f3ea;color:#1b2444;border-radius:12px;width:100%;max-width:600px;max-height:90vh;overflow:auto;padding:26px 24px;box-shadow:0 20px 50px rgba(0,0,0,.25);font-family:var(--body,inherit)}
.tp-smp-kk{font-family:var(--head);letter-spacing:.08em;text-transform:uppercase;font-size:12px;color:var(--gold,#b8995a);margin:0}
.tp-smp-card h2{font-family:var(--head);font-weight:500;margin:6px 0 10px;font-size:24px;outline:none}
.tp-smp-p{line-height:1.6;margin:0 0 6px}
.tp-smp-g{font-family:var(--head);text-transform:uppercase;letter-spacing:.06em;font-size:12px;color:#6b7083;margin:16px 0 6px}
.tp-smp-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff;border:1px solid #e3ddcf;border-radius:8px;padding:10px 12px;margin-bottom:6px}
.tp-smp-t{flex:1;min-width:12rem}.tp-smp-t small{display:block;color:#6b7083;font-size:12.5px}
.tp-smp-ch{display:flex;gap:6px}
.tp-smp-ch button{padding:7px 13px;border-radius:999px;border:1px solid #e3ddcf;background:#fff;font:inherit;font-size:13.5px;cursor:pointer;color:#1b2444}
.tp-smp-ch .tp-smp-yes.on{background:#2f6b4f;border-color:#2f6b4f;color:#fff}
.tp-smp-ch .tp-smp-no.on{background:#8a2a2a;border-color:#8a2a2a;color:#fff}
.tp-smp .tp-linkish{background:none;border:0;padding:0;margin-top:6px;cursor:pointer;color:#1b2444;text-decoration:underline;font:inherit;font-size:14px}
.tp-smp .tp-fld label{display:block;font-size:13.5px;margin:0 0 5px}
.tp-smp .tp-fld input,.tp-smp .tp-fld textarea{width:100%;padding:10px 12px;border:1.5px solid #e3ddcf;border-radius:8px;font:inherit;background:#fff}
.tp-smp .tp-fld{margin:0 0 12px}
.tp-smp .tp-err{color:#a3261c;font-size:14px}
.tp-smp-acts{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:14px}
.tp-smp .tp-btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 18px;border-radius:8px;font:inherit;font-weight:600;cursor:pointer;border:1.5px solid #d6d9e2;background:#fff;color:#1b2444}
.tp-smp .tp-btn-gold{background:#c9b278;border-color:#c9b278}
@media(max-width:600px){.tp-smp-acts .tp-btn{flex:1 1 100%}.tp-smp-card{padding:22px 18px}}
#tp .tp-reslist .tp-r-arrow{white-space:nowrap;font-size:13px}
#tp .tp-fld{margin:0 0 14px}
#tp .tp-fld label{display:block;font-size:13.5px;color:var(--muted);margin:0 0 6px}
#tp .tp-fld input{width:100%;padding:11px 12px;border:1.5px solid var(--line);border-radius:8px;font:inherit}
#tp .tp-err{color:#a3261c;font-size:14px}
#tp .tp-side-primary-note{font-size:12.5px;color:#a7aec9;padding:0 4px 14px;line-height:1.45}
#tp .tp-nav-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8e96b8;padding:16px 12px 8px}
#tp .tp-nav{list-style:none;padding:0;margin:0}
#tp .tp-nav a{display:flex;align-items:center;gap:12px;padding:13px 12px;min-height:50px;border-radius:8px;font-size:15.5px;color:#e3e7f2;text-decoration:none;cursor:pointer;transition:.14s;position:relative}
#tp .tp-nav a:hover{background:rgba(255,255,255,.09);color:#fff}
#tp .tp-nav a.active{background:rgba(200,178,115,.18);color:#fff;font-weight:500}
#tp .tp-nav a.active::before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:var(--gold)}
#tp .tp-nav a svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none;opacity:.85}
#tp .tp-nav a.active svg{stroke:var(--gold);opacity:1}
#tp .tp-nav .tp-n-t{flex:1}
#tp .tp-nav .tp-pill{font-size:13px;background:rgba(255,255,255,.14);color:#e3e7f2;border-radius:6px;padding:2px 9px;font-weight:500}
#tp .tp-nav .tp-pill.tp-alert{background:#d08a1c;color:#25190a}
/* saved work, carried over from V5 */
/* the ask for an account, when something has been designed and needs somewhere to live */
/* The Studio opens as a full-screen overlay at 4000, so anything that has to be answered while
   it is open has to sit above it or it is asked behind the thing it is asking about. */
.sk-modal{position:fixed;inset:0;z-index:5000;display:none;align-items:center;justify-content:center;padding:20px}
.sk-modal.show{display:flex}
.sk-scrim{position:absolute;inset:0;background:rgba(15,25,68,.62)}
.sk-panel{position:relative;background:#fff;border-radius:16px;max-width:440px;width:100%;padding:28px 28px 24px;text-align:center;box-shadow:0 30px 70px -20px rgba(0,0,0,.5)}
.sk-ic{width:46px;height:46px;border-radius:12px;background:#f7f1e2;color:var(--gold-deep);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.sk-ic svg{width:22px;height:22px}
.sk-panel h3{font-family:var(--body);font-size:23px;font-weight:400;margin:0 0 10px;color:var(--navy)}
.sk-panel p{margin:0 0 20px;font-size:14.5px;line-height:1.65;color:var(--muted)}
.sk-acts{display:flex;flex-direction:column;gap:9px}
.sk-acts-row{flex-direction:row;justify-content:center;flex-wrap:wrap}
.sk-acts-row .btn{padding:11px 22px}
.sk-not{border:0;background:none;padding:6px;font-size:13.5px;color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
#tp .tp-saved-empty{padding:34px 20px;text-align:center;color:#5c6070;font-size:15px;line-height:1.65}
#tp .tp-saved-empty span{display:block;margin-top:8px;font-size:13.5px;color:#7a7f90}
#tp .tp-saved-row{display:flex;align-items:center;gap:16px;padding:15px 18px;border-top:1px solid #ece6d8;flex-wrap:wrap}
#tp .tp-saved-row:first-child{border-top:0}
#tp .tp-sv-thumbs{display:flex;gap:5px;flex:0 0 auto;align-items:center}
#tp .tp-sv-th{width:38px;height:38px;border-radius:8px;border:1px solid #ece6d8;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
#tp .tp-sv-th img{width:100%;height:100%;object-fit:contain;padding:2px}
#tp .tp-sv-th-x{background:#f4efe4}
#tp .tp-sv-main{flex:1;min-width:190px}
#tp .tp-sv-main b{display:block;font-size:15px;color:var(--navy)}
#tp .tp-sv-fam{font-weight:400;color:#7a7f90;font-size:13.5px}
#tp .tp-sv-main small{display:block;font-size:13px;color:#7a7f90;margin-top:2px;line-height:1.45}
#tp .tp-sv-when{color:#9aa0ae !important;font-size:12.5px !important}
#tp .tp-sv-val{font-size:15px;color:var(--navy);font-weight:600;white-space:nowrap}
#tp .tp-sv-act{display:flex;align-items:center;gap:12px;flex:0 0 auto}
#tp .tp-sv-drop{border:0;background:none;padding:0;font-size:13px;color:#9a7676;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
@media(max-width:768px){#tp .tp-saved-row{gap:11px}#tp .tp-sv-act{width:100%;justify-content:space-between}}
/* the customer account */
.acct{padding:44px 0 80px;background:var(--cream,#f5f1e8)}
.acct-top{text-align:center;margin-bottom:30px}
.acct-top h1{font-family:var(--body);font-weight:400;font-size:clamp(28px,3.4vw,40px);margin:6px 0 4px;color:var(--navy)}
.acct-top p{margin:0;color:var(--muted);font-size:15px}
.acct-grid{display:grid;grid-template-columns:224px 1fr;gap:34px;align-items:start;max-width:1060px;margin:0 auto}
@media(max-width:1000px){.acct-grid{grid-template-columns:1fr;gap:20px}}
.acct-nav{display:flex;flex-direction:column;gap:2px;position:sticky;top:96px}
@media(max-width:1000px){.acct-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:6px}}
.acct-nav a{display:block;padding:11px 14px;border-radius:9px;font-size:14.5px;color:var(--navy);cursor:pointer;text-decoration:none;border:1px solid transparent}
.acct-nav a:hover{background:#fff;border-color:var(--line)}
.acct-nav a.on{background:var(--navy);color:var(--cream);border-color:var(--navy)}
.acct-nav .acct-out{margin-top:10px;color:var(--muted);font-size:13.5px}
.acct-main{min-width:0}
.acct-h{font-family:var(--body);font-weight:400;font-size:27px;margin:0 0 6px;color:var(--navy)}
.acct-h3{font-family:var(--body);font-weight:400;font-size:19px;margin:28px 0 12px;color:var(--navy)}
.acct-sub{margin:0 0 20px;color:var(--muted);font-size:15px;line-height:1.6;max-width:62ch}
.acct-note{margin:14px 0 0;color:var(--muted);font-size:13.5px;line-height:1.6;max-width:66ch}
.acct-card{background:#fff;border:1px solid var(--line);border-radius:13px;padding:18px 20px;margin-bottom:14px}
.acct-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.acct-2col{grid-template-columns:1fr}}
.acct-check{display:flex;align-items:flex-start;gap:10px;margin-top:10px;cursor:pointer}
.acct-check input{margin-top:3px;width:16px;height:16px;flex:0 0 16px;accent-color:var(--gold)}
.acct-check span{font-size:14px;line-height:1.55;color:var(--navy)}
.acct-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:8px}
@media(max-width:768px){.acct-tiles{grid-template-columns:1fr}}
.acct-tile{background:#fff;border:1px solid var(--line);border-radius:13px;padding:18px;text-align:left;cursor:pointer;font-family:inherit}
.acct-tile:hover{border-color:var(--gold)}
.acct-tile b{display:block;font-family:var(--body);font-size:30px;font-weight:400;color:var(--navy);line-height:1}
.acct-tile span{display:block;margin-top:5px;font-size:13.5px;color:var(--muted)}
/* one order, one card: a head that says where it is, a body of pieces, a foot with the money
   and what can be done next */
.acct-order{background:#fff;border:1px solid var(--line);border-radius:13px;margin-bottom:14px;overflow:hidden}
.acct-order-head{padding:17px 20px 15px;background:#fdfbf6;border-bottom:1px solid var(--line)}
.acct-status{display:inline-block;font-size:12px;letter-spacing:.04em;padding:4px 11px;border-radius:999px;white-space:nowrap}
.acct-st-studio{background:#f7f1e2;color:var(--gold-deep)}
.acct-st-completed{background:#eef2ea;color:#46653f}
.acct-when{display:block;font-family:var(--body);font-weight:400;font-size:20px;color:var(--navy);margin:9px 0 3px;line-height:1.25}
.acct-meta{display:block;font-size:12.5px;color:var(--muted)}
.acct-order-body{padding:4px 20px}
.acct-order-item{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.acct-order-item:last-child{border-bottom:0}
.acct-item-th{flex:0 0 48px;width:48px;height:48px;border-radius:10px;background:var(--cream,#f5f1e8);display:flex;align-items:center;justify-content:center;overflow:hidden}
.acct-item-th img{width:100%;height:100%;object-fit:contain;padding:4px}
.acct-item-t{flex:1;min-width:0}
.acct-item-t b{display:block;font-size:14.5px;font-weight:600;color:var(--navy)}
.acct-item-t small{display:block;font-size:13px;color:var(--muted);margin-top:2px;line-height:1.45}
.acct-order-p{white-space:nowrap;font-size:14.5px;color:var(--navy)}
.acct-order-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 20px 16px;border-top:1px solid var(--line);background:#fdfbf6}
.acct-order-t{font-size:14.5px;color:var(--navy);font-weight:600}
.acct-order-acts{display:flex;gap:9px;flex-wrap:wrap}
.acct-order-acts .btn{padding:9px 16px;font-size:13px}
/* the third thing on a card, said quietly rather than as another button */
.acct-act-link{background:none;border:none;padding:9px 4px;font-family:var(--body);font-size:13px;color:var(--navy);cursor:pointer;text-decoration:underline;text-underline-offset:3px;min-height:38px}
.acct-act-link:hover{color:var(--gold-deep)}
@media(max-width:600px){.acct-order-foot{flex-direction:column;align-items:flex-start;gap:12px}.acct-order-acts{width:100%}}
.acct-addr p{margin:8px 0 0;font-size:14.5px;line-height:1.6;color:var(--navy)}
.acct-addr-h{display:flex;align-items:center;gap:10px}
.acct-addr-h b{font-size:15.5px;color:var(--navy)}
.acct-tag{font-size:12px;padding:3px 9px;border-radius:999px;background:#f7f1e2;color:var(--gold-deep)}
.acct-print{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.acct-print>div{flex:1;min-width:170px}
.acct-print b{display:block;font-size:15.5px;color:var(--navy)}
.acct-print small{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.acct-print-ref{font-size:13px;color:var(--muted)}
/* ---- What can be done with a print we hold ----
   Three things, and they are not of equal weight. Making something is what most people came
   for, so it is the gold one. Buying a copy is a real second choice, so it is a proper button
   but a quiet one. Deleting is rare, and it cannot be taken back, so it sits away from the
   other two as text and reads as what it is. */
.acct-print-acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.acct-print-acts .btn{padding:9px 16px}
.pr-del{font-family:var(--head);font-size:14px;color:#8A2B18;background:none;border:0;padding:11px 8px;
  min-height:44px;cursor:pointer;text-decoration:underline}
.pr-del:hover{color:#5E1D10;text-decoration:none}
.pr-del:focus-visible{outline:2px solid #8A2B18;outline-offset:2px}
/* The dialogue that asks. It is deliberately not a small box: what it has to say cannot be
   said in one line, and somebody about to lose a print should be reading rather than clicking. */
.prd .sk-panel{max-width:560px;text-align:left}
.prd h3{text-align:left}
.prd-what{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);
  border-radius:10px;background:var(--cream-3);margin:0 0 16px}
.prd-what b{display:block;font-family:var(--head);font-size:16px;color:var(--navy)}
.prd-what small{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}
.prd-what .prd-ref{margin-left:auto;font-family:Consolas,Menlo,monospace;font-size:13px;color:var(--muted)}
.prd ul{margin:0 0 16px;padding-left:20px}
.prd li{margin:0 0 8px;font-size:15.5px;line-height:1.55}
.prd-keep{border:1px solid var(--gold);border-radius:10px;padding:14px 16px;background:#FBF7E8;margin:0 0 18px}
.prd-keep b{display:block;font-family:var(--head);font-size:15.5px;color:var(--navy);margin-bottom:4px}
.prd-keep p{margin:0 0 12px;font-size:15px;color:var(--ink)}
.prd-ack{display:flex;gap:11px;align-items:flex-start;margin:0 0 8px;font-size:15px;line-height:1.5;cursor:pointer}
.prd-ack input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:#8A2B18}
.prd .sk-acts{justify-content:flex-end}
.btn-danger{background:#8A2B18;color:#fff;border:1.5px solid #8A2B18}
.btn-danger:hover{background:#742315;border-color:#742315}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn[disabled]:hover{background:#8A2B18;border-color:#8A2B18}
@media(max-width:600px){.prd .sk-acts{flex-direction:column-reverse}.prd .sk-acts .btn{width:100%}}
/* the saved list, shared with the trade portal's look */
.acct-saved{margin:0}
.acct-saved .tp-saved-row{display:flex;align-items:center;gap:16px;padding:15px 4px;border-top:1px solid var(--line,#ece6d8);flex-wrap:wrap}
.acct-saved .tp-saved-row:first-child{border-top:0}
.acct-saved .tp-sv-th{width:44px;height:44px;border-radius:9px;border:1px solid var(--line,#ece6d8);background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.acct-saved .tp-sv-th img{width:100%;height:100%;object-fit:contain;padding:2px}
.acct-saved .tp-sv-main{flex:1;min-width:190px}
.acct-saved .tp-sv-main b{display:block;font-size:16px;color:var(--navy)}
.acct-saved .tp-sv-main small{display:block;font-size:13.5px;color:var(--muted);margin-top:2px;line-height:1.45}
.acct-saved .tp-sv-val{font-size:16px;color:var(--navy);font-weight:600;white-space:nowrap}
.acct-saved .tp-sv-act{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.acct-saved .tp-sv-drop{border:0;background:none;padding:0;font-size:13.5px;color:#9a7676;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.acct-empty{padding:40px 20px;text-align:center;color:var(--muted);font-size:16px;line-height:1.7}
.acct-empty span{display:block;margin-top:8px;font-size:14px}
#tp .tp-side-foot{margin-top:20px;padding:16px 12px 0;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:#a7aec9;line-height:1.5}
#tp .tp-side-foot b{color:var(--gold);font-weight:500;display:block;font-size:13px}
#tp .tp-scrim{display:none}
#tp .tp-side-close{display:none;background:none;border:1.5px solid rgba(255,255,255,.3);border-radius:8px;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;margin:0 0 12px auto}
#tp .tp-side-close svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round}
#tp .tp-main{flex:1;min-width:0;padding:26px 34px 80px;max-width:1720px}
#tp .tp-page-h{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:22px}
#tp .tp-page-h .tp-eyebrow{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);font-weight:500}
#tp .tp-page-h h1{font-family:var(--body);font-size:32px;font-weight:400;margin:6px 0 4px;letter-spacing:-.01em}
#tp .tp-page-h p{margin:0;color:var(--muted);font-size:15.5px;max-width:72ch}
#tp .tp-page-h .tp-ph-actions{display:flex;gap:10px;flex-wrap:wrap}
#tp .tp-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 24px;margin-bottom:20px}
#tp .tp-card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:14px;flex-wrap:wrap}
#tp .tp-card-h h3,#tp .tp-card-h h2{font-size:18px;font-weight:500}
#tp .tp-card-h .tp-card-sub{font-size:14px;color:var(--muted)}
#tp .tp-card-note{font-size:14px;color:var(--muted);margin:0 0 14px}
#tp .tp-grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
#tp .tp-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
#tp .tp-grid2>.tp-card,
#tp .tp-grid3>.tp-card{margin-bottom:0;display:flex;flex-direction:column}
#tp .tp-grid2>.tp-card>.tp-stack,
#tp .tp-grid3>.tp-card>.tp-stack{margin-top:auto;padding-top:6px}
#tp .tp-sec{display:none}
#tp .tp-sec.on{display:block}
/* in Studio mode no account section shows, whichever one was last open */
#tp.tp-studio-mode .tp-sec.on{display:none}
/* Saved work is the one section a branch reaches without leaving Studio mode, because it is
   where the family's own designs are waiting. */
#tp.tp-studio-mode #tpsec-saved.on{display:block}
#tp.tp-studio-mode.tp-saved-open .tp-studio-main{display:none}
#tp .tp-side-saved{display:flex;align-items:center;gap:10px;width:100%;margin-top:10px;padding:11px 13px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05);border-radius:10px;color:#e9ecf6;font-family:inherit;font-size:14px;cursor:pointer;text-align:left}
#tp .tp-side-saved:hover{border-color:var(--gold);color:#fff}
#tp .tp-side-saved svg{width:17px;height:17px;flex:0 0 17px;stroke:var(--gold)}
#tp .tp-side-saved span:first-of-type{flex:1}
#tp .tp-att{border:1px solid var(--line);background:#fff;border-radius:12px;overflow:hidden;margin-bottom:20px}
#tp .tp-att-h{display:flex;align-items:center;gap:12px;padding:16px 24px;border-bottom:1px solid var(--line-2);background:var(--cream-3)}
#tp .tp-att-h h3{font-size:18px;font-weight:500}
#tp .tp-att-h .tp-cnt{font-size:13px;background:#d08a1c;color:#25190a;border-radius:6px;padding:2px 10px;font-weight:600}
#tp .tp-att-row{display:flex;align-items:center;gap:16px;padding:18px 24px;border-bottom:1px solid var(--line-2)}
#tp .tp-att-row:last-child{border-bottom:none}
#tp .tp-att-row:hover{background:var(--cream-3)}
#tp .tp-att-ic{width:40px;height:40px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center}
#tp .tp-att-ic svg{width:21px;height:21px;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#tp .tp-att-row.tp-amber .tp-att-ic{background:var(--amber-bg)}
#tp .tp-att-row.tp-amber .tp-att-ic svg{stroke:var(--amber)}
#tp .tp-att-row.tp-blue .tp-att-ic{background:var(--blue-bg)}
#tp .tp-att-row.tp-blue .tp-att-ic svg{stroke:var(--blue)}
#tp .tp-att-row.tp-green .tp-att-ic{background:var(--green-bg)}
#tp .tp-att-row.tp-green .tp-att-ic svg{stroke:var(--green)}
#tp .tp-att-t{flex:1;min-width:0}
#tp .tp-att-t b{font-weight:500;font-size:16px;color:var(--navy);display:block}
#tp .tp-att-t small{color:var(--muted);font-size:14px}
#tp .tp-att-act{display:flex;gap:10px;flex:none}
#tp .tp-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
#tp .tp-kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px}
#tp .tp-kpi small{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:block;font-weight:500}
#tp .tp-kpi b{font-size:34px;font-weight:500;color:var(--navy);display:block;margin:7px 0 2px;line-height:1;letter-spacing:-.02em}
#tp .tp-kpi span{font-size:14px;color:var(--muted)}
#tp .tp-kpi .tp-up{color:var(--green);font-weight:500}
#tp .tp-ord-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;border-bottom:1.5px solid var(--line);margin:0 -24px;padding:14px 24px 0}
#tp .tp-ord-card{padding-top:0}
#tp .tp-ord-tabs .tp-ord-tab:first-child{padding-left:0;padding-right:18px}
#tp .tp-ord-search{padding-bottom:9px}
#tp .tp-ord-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:0;padding-bottom:0}
#tp .tp-ord-tab{font-family:var(--head);font-size:15px;padding:12px 16px;min-height:46px;border:none;background:none;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1.5px}
#tp .tp-ord-tab:hover{color:var(--navy);background:var(--cream-3)}
#tp .tp-ord-tab .tp-cnt{display:inline-block;background:var(--cream-2);color:var(--navy);border-radius:6px;font-size:13px;padding:1px 8px;margin-left:6px;font-weight:500}
#tp .tp-ord-tab.active{color:var(--navy);border-bottom-color:var(--gold);font-weight:500}
#tp .tp-ord-tab.active .tp-cnt{background:var(--gold);color:var(--navy)}
#tp .tp-tablewrap{overflow-x:auto;margin:0 -24px}
#tp .tp-otable{width:100%;border-collapse:collapse;min-width:760px}
#tp .tp-otable th{text-align:left;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:14px 14px;border-bottom:1.5px solid var(--line);background:var(--cream-3);white-space:nowrap;position:sticky;top:0;z-index:3}
/* top:0, not 66px: the table scrolls inside its own box (overflow-x), so the heading sticks to that box,
   and 66px pushed it down over the first order (4 Oct 2026). */
#tp .tp-sortb{display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:0;margin:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer}
#tp .tp-sortb:hover,#tp .tp-sortb.on{color:var(--navy)}
#tp .tp-sorti{font-size:10px;opacity:.5}
#tp .tp-sortb.on .tp-sorti{opacity:1;color:var(--gold-deep)}
#tp .tp-otable th.tp-onum .tp-sortb,#tp .tp-otable th.tp-ocomm .tp-sortb{flex-direction:row-reverse}
#tp .tp-otable th.tp-onum,#tp .tp-otable th.tp-ocomm{text-align:right}
#tp .tp-rowlink{cursor:pointer}
#tp .tp-rowlink:focus-visible{outline:2px solid var(--gold-deep);outline-offset:-2px}
#tp .tp-otable th:first-child,
#tp .tp-otable td:first-child{padding-left:24px}
#tp .tp-otable th:last-child,
#tp .tp-otable td:last-child{padding-right:24px}
#tp .tp-otable td{padding:16px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle;font-size:15px}
#tp .tp-otable tr:last-child td{border-bottom:none}
#tp .tp-otable tbody tr:hover td{background:var(--cream-3)}
#tp .tp-omono{font-family:var(--head);font-size:15px;color:var(--navy);font-weight:500;font-variant-numeric:tabular-nums}
#tp .tp-ofam b{font-weight:500;font-size:15.5px;color:var(--navy);display:block}
#tp .tp-ofam small{color:var(--muted);font-size:14px}
#tp .tp-ostatus{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;padding:6px 12px;border-radius:6px;white-space:nowrap}
#tp .tp-ostatus::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
#tp .tp-os-awaiting{background:var(--amber-bg);color:var(--amber)}
#tp .tp-os-studio{background:var(--blue-bg);color:var(--blue)}
#tp .tp-os-sent{background:#EDEAF7;color:#4A3D8F}
/* ---- one family, on its own page ---- */
#tp .tp-back{display:inline-flex;align-items:center;gap:7px;font-family:var(--head);font-size:14px;color:var(--muted);
  background:none;border:0;padding:10px 8px 10px 0;min-height:44px;cursor:pointer}
#tp .tp-back:hover{color:var(--navy)}
#tp .tp-back svg{width:18px;height:18px}
#tp .tp-fnums{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 20px}
#tp .tp-fnum{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px}
#tp .tp-fnum span{display:block;font-family:var(--head);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
#tp .tp-fnum b{font-family:var(--head);font-size:28px;font-weight:500;color:var(--navy);line-height:1}
#tp .tp-fnum small{display:block;font-size:13.5px;color:var(--muted);margin-top:6px}
#tp .tp-prints{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
#tp .tp-print{border:1px solid var(--line);border-radius:10px;padding:16px 18px;background:var(--cream-3)}
#tp .tp-print-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:4px}
#tp .tp-print-h b{font-family:var(--head);font-size:16px;font-weight:500;color:var(--navy)}
#tp .tp-print-h span{font-family:Consolas,Menlo,monospace;font-size:13px;color:var(--muted)}
#tp .tp-print p{margin:0 0 10px;font-size:14.5px;color:var(--muted)}
#tp .tp-print dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0;font-size:14.5px}
#tp .tp-print dt{font-family:var(--head);font-size:13px;color:var(--muted)}
#tp .tp-print dd{margin:0;color:var(--ink)}
#tp .tp-keep{border:1px solid var(--line);border-radius:10px;padding:0;margin:0 0 14px;overflow:hidden}
#tp .tp-keep-h{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:14px 18px;background:var(--cream-3);border-bottom:1px solid var(--line)}
#tp .tp-keep-h b{font-family:var(--head);font-size:16px;font-weight:500;color:var(--navy)}
#tp .tp-keep-h small{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}
#tp .tp-keep-r{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#tp .tp-keep-b{padding:16px 18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 26px}
#tp .tp-keep-b div{display:flex;gap:10px;justify-content:space-between;border-bottom:1px solid var(--line-2);padding-bottom:8px;font-size:14.5px}
#tp .tp-keep-b dt,#tp .tp-keep-b span:first-child{font-family:var(--head);font-size:13px;color:var(--muted);flex:none}
#tp .tp-keep-b span:last-child{text-align:right;color:var(--ink)}
#tp .tp-keep-f{padding:0 18px 16px;display:flex;gap:10px;flex-wrap:wrap}
#tp .tp-retired{color:#7A4C09}
#tp .tp-print-t{display:flex;align-items:center;gap:9px;min-width:0}
#tp .tp-ptype{display:inline-block;font-family:var(--head);font-size:12px;font-weight:600;letter-spacing:.05em;
  padding:3px 9px;border-radius:6px;background:var(--gold-soft,#E7DCBD);color:#6E5A28;white-space:nowrap}
#tp .tp-print-cta{margin-top:12px}
#tp .tp-print-cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
#tp .tp-print-cta .tp-btn{flex:0 1 auto}
#tp .tp-print-del{font-family:var(--head);font-size:14px;color:#8A2B18;background:none;border:0;
  padding:11px 8px;min-height:44px;cursor:pointer;text-decoration:underline}
#tp .tp-print-del:hover{color:#5E1D10;text-decoration:none}
#tp .tp-linkish{display:inline-block;font-family:Consolas,Menlo,monospace;font-size:14px;color:var(--navy);
  background:none;border:0;padding:4px 5px;margin:-4px -5px;text-decoration:underline;cursor:pointer;min-height:26px}
#tp .tp-linkish:hover{color:var(--gold-deep)}
#tp .tp-empty{border:1px dashed var(--line);border-radius:10px;padding:22px;text-align:center;color:var(--muted);font-size:15px}
@media(max-width:1000px){#tp .tp-fnums{grid-template-columns:repeat(2,1fr)}#tp .tp-prints{grid-template-columns:1fr}}
@media(max-width:680px){#tp .tp-fnums{grid-template-columns:1fr}#tp .tp-keep-b{grid-template-columns:1fr}}
#tp .tp-os-dispatched{background:#dcebe9;color:#20635e}
#tp .tp-os-completed{background:var(--green-bg);color:var(--green)}
#tp .tp-oeta{font-size:14.5px;color:var(--muted)}
#tp .tp-otable td.tp-onum,#tp .tp-otable td.tp-ocomm{text-align:right}
#tp .tp-onum{font-variant-numeric:tabular-nums;font-weight:500;color:var(--navy)}
#tp .tp-ocomm{font-variant-numeric:tabular-nums;color:var(--gold-deep);font-weight:600}
#tp .tp-oact{text-align:right;white-space:nowrap}
#tp .tp-oact button{border:1.5px solid var(--line);background:#fff;border-radius:8px;width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-left:8px;cursor:pointer;color:var(--navy);transition:.14s}
#tp .tp-oact button:hover{border-color:var(--navy);background:var(--cream-3)}
#tp .tp-oact button svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#tp .tp-ord-foot{display:flex;justify-content:flex-end;align-items:center;margin-top:16px;gap:14px;flex-wrap:wrap}
#tp .tp-ord-foot-split{justify-content:space-between}
#tp .tp-tsearch{position:relative}
#tp .tp-tsearch input{border:1.5px solid var(--line);border-radius:8px;padding:12px 14px 12px 40px;font-family:var(--head);font-size:15px;width:290px;min-height:46px;background:#fff}
#tp .tp-tsearch input:focus{outline:2px solid #0F1944;outline-offset:3px;border-color:var(--navy)}
#tp .tp-tsearch svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;stroke:var(--muted);fill:none;stroke-width:2}
#tp .tp-side-card h3{font-size:18px;font-weight:500;margin-bottom:14px;display:flex;align-items:center;gap:9px}
#tp .tp-side-card h3 svg{width:20px;height:20px;stroke:var(--gold-deep);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#tp .tp-stock-row{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
#tp .tp-stock-row b{font-size:44px;font-weight:500;color:var(--navy);line-height:1;letter-spacing:-.02em}
#tp .tp-stock-row .tp-low{font-size:13px;font-weight:600;color:var(--amber);background:var(--amber-bg);padding:4px 10px;border-radius:6px}
#tp .tp-stock-sub{font-size:14.5px;color:var(--muted);margin-bottom:14px}
#tp .tp-stock-bar{height:10px;background:var(--cream-2);border-radius:5px;overflow:hidden;margin-bottom:18px}
#tp .tp-stock-bar span{display:block;height:100%;background:#d08a1c;border-radius:5px}
#tp .tp-payline{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--line-2);font-size:15.5px}
#tp .tp-payline:last-of-type{border-bottom:none}
#tp .tp-payline b{font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums}
#tp .tp-payline .tp-muted{color:var(--muted);font-size:14px}
#tp .tp-tier-badge{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;padding:7px 14px;border-radius:6px;background:var(--gold-soft);color:#5d4f22}
#tp .tp-tier-prog{margin:16px 0}
#tp .tp-tier-bar{height:10px;background:var(--cream-2);border-radius:5px;overflow:hidden}
#tp .tp-tier-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-deep));border-radius:5px}
#tp .tp-tier-lbl{font-size:14.5px;color:var(--muted);margin-top:10px}
#tp .tp-tier-lbl b{color:var(--navy);font-weight:600}
#tp .tp-perks{list-style:none;padding:0;margin:14px 0 0}
#tp .tp-perks li{font-size:15px;padding:6px 0 6px 26px;position:relative}
#tp .tp-perks li::before{content:"✓";position:absolute;left:0;color:var(--gold-deep);font-weight:700}
#tp .tp-mgr{display:flex;gap:14px;align-items:center;margin-bottom:16px}
#tp .tp-mgr-av{width:54px;height:54px;border-radius:50%;background:var(--navy);color:var(--gold);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:19px;flex:none}
#tp .tp-mgr-info b{font-weight:500;color:var(--navy);display:block;font-size:17px}
#tp .tp-mgr-info small{color:var(--muted);font-size:14px}
#tp .tp-stack{display:flex;flex-direction:column;gap:10px}
#tp .tp-stock-facts{list-style:none;padding:0;margin:0 0 4px}
#tp .tp-stock-facts li{position:relative;padding:0 0 0 22px;margin-bottom:9px;font-size:14.5px;color:var(--muted);line-height:1.45}
#tp .tp-stock-facts li::before{content:"";position:absolute;left:4px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
#tp .tp-grid2>.tp-card>.tp-reslist,
#tp .tp-grid2>.tp-card>.tp-payline:last-of-type{margin-bottom:0}
#tp .tp-reslist{list-style:none;padding:0;margin:0}
#tp .tp-reslist li{border-bottom:1px solid var(--line-2)}
#tp .tp-reslist li:last-child{border-bottom:none}
#tp .tp-reslist a{display:flex;align-items:center;gap:14px;padding:15px 4px;min-height:64px;cursor:pointer;text-decoration:none;font-size:15.5px;color:var(--navy);transition:.14s;border-radius:8px}
#tp .tp-reslist a:hover{background:var(--cream-3)}
#tp .tp-reslist .tp-r-ic{width:40px;height:40px;border-radius:8px;background:var(--cream-2);display:flex;align-items:center;justify-content:center;flex:none}
#tp .tp-reslist .tp-r-ic svg{width:20px;height:20px;stroke:var(--gold-deep);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#tp .tp-reslist .tp-r-t{flex:1;font-weight:500}
#tp .tp-reslist .tp-r-t small{display:block;color:var(--muted);font-size:14px;font-weight:400}
#tp .tp-reslist .tp-r-arrow{color:var(--muted);font-size:19px}
#tp .tp-steps{counter-reset:s;list-style:none;padding:0;margin:0}
#tp .tp-steps li{counter-increment:s;position:relative;padding:0 0 20px 46px;font-size:15px}
#tp .tp-steps li:last-child{padding-bottom:6px}
#tp .tp-steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:32px;height:32px;border-radius:50%;background:var(--cream-2);color:var(--navy);font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center}
#tp .tp-steps li b{font-weight:500;color:var(--navy);display:block;font-size:16px}
#tp .tp-steps li small{color:var(--muted);font-size:14.5px}
/* ---- The panel every order and family action opens ------------------------------------
   One panel, seven contents. It slides in over the right of the window and leaves the table
   where it was, so a branch working down a list of orders does not lose its place, and the
   second panel is already familiar because it is the same shape as the first. It is kept on
   the body rather than inside the portal, because that is where the focus trap in this
   document looks for a dialogue. Its own names are declared here with the shared ones as
   their source, so it looks the same in a build that has the shared list and one that does
   not.                                                                                    */
.tp-sheet,.tp-sheet-scrim{
  --sh-navy:var(--navy,#0F1944);
  --sh-gold:var(--gold,#C8B273);
  --sh-gold-deep:#6E5A28;
  --sh-cream:var(--cream,#F6F3EA);
  --sh-cream-3:var(--cream-3,#FAF8F2);
  --sh-white:var(--white,#FFFFFF);
  --sh-line:var(--line,#E2DCCA);
  --sh-line-2:var(--line-2,#EAE5D8);
  --sh-muted:#5A6072;
  --sh-ink:var(--ink,#2A2E3F);
  --sh-head:var(--head,var(--head-font,'Jost','Futura','Century Gothic',sans-serif));
  --sh-body:var(--body,var(--body-font,'Spectral',Georgia,'Times New Roman',serif));
}
.tp-sheet-scrim{position:fixed;inset:0;background:rgba(15,25,68,.44);opacity:0;pointer-events:none;transition:opacity .22s;z-index:120}
.tp-sheet-scrim.show{opacity:1;pointer-events:auto}
.tp-sheet{position:fixed;top:0;right:0;height:100%;width:min(540px,94vw);z-index:121;
  background:var(--sh-cream);color:var(--sh-ink);font-family:var(--sh-body);font-size:16px;line-height:1.6;
  transform:translateX(102%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;box-shadow:-20px 0 50px rgba(15,25,68,.22)}
.tp-sheet.show{transform:translateX(0)}
.tp-sheet *{box-sizing:border-box}
.tp-sheet h2,.tp-sheet h3{font-family:var(--sh-head);color:var(--sh-navy);font-weight:500;margin:0}
.tp-sheet :focus-visible{outline:2px solid var(--sh-gold-deep);outline-offset:2px}
.tp-sheet-h{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:18px 18px 16px 24px;border-bottom:1px solid var(--sh-line);background:var(--sh-white)}
.tp-sheet-t{min-width:0}
.tp-sheet-kk{font-family:var(--sh-head);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sh-gold-deep);margin:0 0 6px;word-break:break-word}
.tp-sheet-h h2{font-size:21px;line-height:1.22;word-break:break-word}
.tp-sheet-x{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--sh-line);
  background:var(--sh-white);color:var(--sh-navy);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.15s}
.tp-sheet-x:hover{background:var(--sh-navy);border-color:var(--sh-navy);color:var(--sh-cream)}
.tp-sheet-x svg{width:20px;height:20px}
.tp-sheet-b{flex:1;overflow-y:auto;padding:22px 24px 26px}
.tp-sheet-f{border-top:1px solid var(--sh-line);background:var(--sh-white);padding:14px 24px;display:flex;gap:10px;flex-wrap:wrap}
.tp-sheet .tp-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;flex:1 1 auto;min-width:160px;
  font-family:var(--sh-head);font-size:15px;font-weight:500;padding:12px 20px;min-height:46px;border-radius:8px;
  border:1.5px solid transparent;cursor:pointer;transition:.14s;background:none;text-decoration:none;color:var(--sh-navy)}
.tp-sheet .tp-btn-gold{background:var(--sh-gold);color:var(--sh-navy);border-color:var(--sh-gold)}
.tp-sheet .tp-btn-gold:hover{background:#D6C188;border-color:#D6C188}
.tp-sheet .tp-btn-line{background:var(--sh-white);border-color:var(--sh-line);color:var(--sh-navy)}
.tp-sheet .tp-btn-line:hover{border-color:var(--sh-navy);background:var(--sh-cream-3)}
.tp-sheet .tp-btn[disabled]{opacity:.5;cursor:not-allowed}
.tp-sheet .tp-btn[disabled]:hover{background:var(--sh-white);border-color:var(--sh-line)}
.tp-sh-h{font-family:var(--sh-head);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sh-muted);font-weight:400;margin:0 0 12px}
.tp-sh-p{margin:0 0 20px;font-size:15.5px}
.tp-sh-note{margin:16px 0 0;font-family:var(--sh-head);font-weight:300;font-size:14px;line-height:1.55;color:var(--sh-muted)}
.tp-kvs{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;margin:0 0 24px}
.tp-kv{display:flex;flex-direction:column;gap:3px;min-width:0}
.tp-kv span{font-family:var(--sh-head);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--sh-muted)}
.tp-kv b{font-family:var(--sh-head);font-size:16px;font-weight:500;color:var(--sh-navy);word-break:break-word}
/* Where the order has got to, read top to bottom. Gold is behind it, an outlined dot is where
   it is now, and grey is still ahead. */
.tp-tl{list-style:none;margin:0 0 24px;padding:0}
.tp-tl li{position:relative;padding:0 0 18px 28px;margin-left:7px;border-left:2px solid var(--sh-line)}
.tp-tl li::before{content:"";position:absolute;left:-8px;top:3px;width:14px;height:14px;border-radius:50%;
  background:var(--sh-cream);border:2px solid var(--sh-line)}
.tp-tl li b{display:block;font-family:var(--sh-head);font-size:15px;font-weight:500;color:var(--sh-muted)}
.tp-tl li small{display:block;font-size:14px;color:var(--sh-muted);margin-top:2px}
.tp-tl li.tp-tl-done{border-left-color:var(--sh-gold)}
.tp-tl li.tp-tl-done::before{background:var(--sh-gold);border-color:var(--sh-gold)}
.tp-tl li.tp-tl-done b{color:var(--sh-navy)}
.tp-tl li.tp-tl-now::before{background:var(--sh-white);border-color:var(--sh-gold);box-shadow:0 0 0 4px rgba(200,178,115,.3)}
.tp-tl li.tp-tl-now b{color:var(--sh-navy);font-weight:600}
.tp-tl li:last-child{border-left-color:transparent;padding-bottom:0}
/* Choosing the print file */
.tp-drop{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  padding:28px 20px;border:2px dashed var(--sh-line);border-radius:12px;background:var(--sh-white);cursor:pointer;transition:.15s}
.tp-drop:hover{border-color:var(--sh-gold);background:var(--sh-cream-3)}
.tp-drop svg{width:30px;height:30px;color:var(--sh-gold-deep)}
.tp-drop b{font-family:var(--sh-head);font-size:16px;font-weight:500;color:var(--sh-navy)}
.tp-drop small{font-size:14px;color:var(--sh-muted)}
.tp-drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.tp-drop:focus-within{border-color:var(--sh-gold-deep);outline:2px solid var(--sh-gold-deep);outline-offset:2px}
.tp-chosen{display:flex;align-items:center;gap:12px;margin-top:14px;
  padding:12px 14px;border:1px solid var(--sh-line);border-radius:9px;background:var(--sh-white)}
.tp-chosen-n{font-family:var(--sh-head);font-size:15px;color:var(--sh-navy);word-break:break-all}
.tp-chosen-s{font-size:14px;color:var(--sh-muted);white-space:nowrap}
/* The chosen file, before it has been sent. The green edge is the only confirmation there is
   at this point, so it carries the tick with it. */
.tp-chosen.ok{border-color:#2F6B45;border-width:2px;padding:11px 13px}
.tp-chosen-ic{flex:none;width:24px;height:24px;border-radius:50%;background:#E2EFE7;color:#2F6B45;
  display:inline-flex;align-items:center;justify-content:center}
.tp-chosen-ic svg{width:14px;height:14px}
.tp-chosen-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tp-chosen-x{flex:none;font-family:var(--sh-head);font-size:14px;color:#8A2B18;background:none;border:0;
  padding:8px 6px;min-height:40px;cursor:pointer;text-decoration:underline}
.tp-chosen-x:hover{text-decoration:none;color:#742315}
/* Talking to the studio */
.tp-thread{display:flex;flex-direction:column;gap:12px;margin:0 0 20px;max-height:44vh;overflow-y:auto;padding-right:2px}
.tp-msg{border-radius:12px;padding:12px 14px;max-width:88%}
.tp-msg p{margin:0 0 6px;font-size:15.5px}
.tp-msg span{font-family:var(--sh-head);font-size:12.5px;color:var(--sh-muted)}
.tp-msg-studio{background:var(--sh-white);border:1px solid var(--sh-line);align-self:flex-start}
.tp-msg-branch{background:#E7DCBD;border:1px solid #DCCF9E;align-self:flex-end}
.tp-fld{margin:0 0 4px}
.tp-fld label{display:block;font-family:var(--sh-head);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sh-muted);margin-bottom:7px}
.tp-fld textarea{width:100%;font-family:var(--sh-body);font-size:16px;line-height:1.55;color:var(--sh-ink);
  padding:12px 14px;border:1px solid var(--sh-line);border-radius:9px;background:var(--sh-white);resize:vertical}
.tp-err{margin:8px 0 0;font-family:var(--sh-head);font-size:14px;color:#8A2B18}
/* How many to make again. The label sits above the stepper rather than beside it, so the two
   read as one control instead of two things at opposite ends of a line. */
.tp-qty{display:inline-flex;align-items:center;gap:12px;margin:0}
.tp-qty b{font-family:var(--sh-head);font-size:18px;color:var(--sh-navy);min-width:26px;text-align:center}
.tp-qty-b{width:44px;height:44px;border-radius:9px;border:1px solid var(--sh-line);background:var(--sh-white);
  color:var(--sh-navy);font-size:20px;line-height:1;cursor:pointer;transition:.14s}
.tp-qty-b:hover{border-color:var(--sh-navy)}
/* Their orders, inside the family panel */
.tp-olist{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:8px}
.tp-olist button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;
  padding:12px 14px;min-height:56px;border:1px solid var(--sh-line);border-radius:10px;background:var(--sh-white);cursor:pointer;transition:.14s}
.tp-olist button:hover{border-color:var(--sh-navy);background:var(--sh-cream-3)}
.tp-olist-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.tp-olist-t b{font-family:var(--sh-head);font-size:15px;font-weight:500;color:var(--sh-navy)}
.tp-olist-t small{font-size:13.5px;color:var(--sh-muted)}
.tp-sheet .tp-tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--sh-head);font-size:13px;font-weight:600;
  padding:5px 11px;border-radius:6px;white-space:nowrap}
.tp-sheet .tp-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.tp-sheet .tp-tag-awaiting{background:#FBEED6;color:#7A4C09}
.tp-sheet .tp-tag-studio{background:#E6ECF8;color:#2F4F95}
.tp-sheet .tp-tag-dispatched{background:#DCEBE9;color:#20635E}
.tp-sheet .tp-tag-completed{background:#E2EFE7;color:#2F6B45}
/* The print, while it can still be changed and once it cannot */
.tp-sheet .tp-tag-sent{background:#EDEAF7;color:#4A3D8F}
.tp-file{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 14px;
  padding:12px 14px;border:1px solid var(--sh-line);border-radius:9px;background:var(--sh-white)}
.tp-file-n{font-family:var(--sh-head);font-size:15px;color:var(--sh-navy);word-break:break-all}
.tp-file-s{font-family:var(--sh-head);font-size:13px;color:var(--sh-muted);white-space:nowrap}
.tp-print-acts{display:flex;gap:10px;flex-wrap:wrap;margin:0}
.tp-print-acts .tp-btn{flex:0 1 auto;min-width:170px}
.tp-sheet .tp-btn-quiet{background:none;border-color:transparent;color:#8A2B18;min-width:0;flex:0 0 auto;text-decoration:underline}
.tp-sheet .tp-btn-quiet:hover{background:#F7EDEA;border-color:#E3C9C2;text-decoration:none}
.tp-sheet .tp-btn-danger{background:#8A2B18;color:#fff;border-color:#8A2B18}
.tp-sheet .tp-btn-danger:hover{background:#742315;border-color:#742315}
.tp-qty-block{margin:0 0 24px}
.tp-qty-l{font-family:var(--sh-head);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--sh-muted);margin:0 0 9px}
/* Done */
.tp-done{text-align:center;padding:14px 0 6px}
.tp-done-ic{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;
  background:#E2EFE7;color:#2F6B45;margin-bottom:14px}
.tp-done-ic svg{width:28px;height:28px}
.tp-done b{display:block;font-family:var(--sh-head);font-size:19px;font-weight:500;color:var(--sh-navy);margin-bottom:8px}
.tp-done p{margin:0 auto;max-width:42ch;font-size:15.5px;color:var(--sh-ink)}
.tp-mono{font-family:Consolas,Menlo,monospace;font-size:16px;letter-spacing:.04em;color:var(--sh-navy)}
@media(max-width:600px){
  .tp-sheet{width:100vw}
  .tp-sheet-h{padding:16px 14px 14px 18px}
  .tp-sheet-b{padding:18px 18px 22px}
  .tp-sheet-f{padding:12px 18px}
  .tp-sheet .tp-btn{flex:1 1 100%}
  .tp-kvs{grid-template-columns:1fr;gap:12px}
}
#tp #tpToast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--navy);color:#fff;padding:15px 24px;border-radius:10px;font-size:15px;box-shadow:0 18px 44px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:.22s;z-index:90;max-width:90vw;text-align:center}
#tp #tpToast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#tp #tpToast b{color:var(--gold)}
@media(max-width:1240px){
#tp .tp-kpis{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1240px){
#tp .tp-grid3{grid-template-columns:1fr}
#tp .tp-top-search input{width:220px}
#tp .tp-top-search input:focus{width:260px}
}
@media(max-width:1000px){
#tp .tp-grid2{grid-template-columns:1fr}
#tp .tp-burger{display:flex}
#tp .tp-brand{width:auto}
#tp .tp-top-search{display:none}
#tp .tp-side{position:fixed;top:0;left:0;height:100vh;transform:translateX(-100%);transition:transform .22s;box-shadow:0 0 40px rgba(0,0,0,.45);padding-top:18px;z-index:65;width:296px}
#tp .tp-side.open{transform:none}
#tp .tp-side-close{display:flex}
#tp .tp-shell{background:var(--cream)}
#tp .tp-scrim.on{display:block;position:fixed;inset:0;background:rgba(15,25,68,.5);z-index:62}
#tp .tp-main{padding:22px 18px 70px}
#tp .tp-tablewrap{margin:0 -24px}
#tp .tp-ord-bar{margin:0 -24px;padding:14px 24px 0}
#tp .tp-ord-tabs{margin-left:-16px}
#tp .tp-ord-tabs .tp-ord-tab:first-child{padding-left:16px;padding-right:16px}
#tp .tp-ord-search{width:100%;padding-bottom:14px}
#tp .tp-ord-search input{width:100%}
}
@media(max-width:768px){
#tp .tp-top-portal{display:none}
}
@media(max-width:768px){
#tp .tp-kpis{grid-template-columns:1fr 1fr;gap:12px}
#tp .tp-kpi b{font-size:28px}
#tp .tp-page-h h1{font-size:26px}
#tp .tp-top-acct .tp-who{display:none}
#tp .tp-top-logout{display:none}
#tp .tp-topbar-in{gap:14px;padding:0 16px}
#tp .tp-brand{font-size:13.5px;letter-spacing:.075em}
#tp .tp-top-acct{margin-left:auto}
#tp .tp-att-row{flex-wrap:wrap}
#tp .tp-att-act{width:100%;padding-left:56px}
#tp .tp-att-act .tp-btn{flex:1}
}

/* =====================================================================
   Brand guidelines section 03 baseline.
   Focus, motion, the pressed state and the skip link, set in one place.
   Removing any of these is a defect against part 3.7.
   ===================================================================== */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible,
[role="button"]:focus-visible,[onclick]:focus-visible{
  outline:2px solid #0F1944;
  outline-offset:3px;
  box-shadow:0 0 0 3px rgba(246,243,234,.95);
  border-radius:5px;
}
/* a pressed state that composes with whatever the control already does */
button:active,a.btn:active,.btn:active,[role="button"]:active{filter:brightness(.93)}
/* the skip link, first focusable thing on the page */
.skip-link{position:absolute;left:-9999px;top:0;z-index:99999;background:#0F1944;color:#fff;
  font-family:inherit;font-size:15px;font-weight:600;padding:13px 20px;
  border-radius:0 0 8px 0;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.skip-link:focus{left:0}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* Section 03, part 3.5: a field reporting a problem. */
.fld-help{display:block;margin-top:5px;font-size:14px;color:#5A6072;line-height:1.5}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{border-color:#7A3020;border-width:2px}
.fld-msg{display:flex;gap:7px;align-items:flex-start;margin-top:6px;font-size:15px;color:#7A3020;line-height:1.5}
.fld-msg::before{content:'!';flex:0 0 auto;width:19px;height:19px;border-radius:50%;border:2px solid #7A3020;
  font-weight:700;font-size:13px;line-height:15px;text-align:center;font-family:var(--head)}
.co-errors{margin:14px 0 4px;padding:13px 16px;border:1.5px solid #7A3020;border-left:5px solid #7A3020;
  border-radius:10px;background:#fff;color:#2A2E3F;font-size:16px;line-height:1.55}
.co-errors[hidden]{display:none}

/* ---- section 03, part 3.4: gold used as text on a light ground ---- */
/* gold stars sit on white inside a testimonial or a review, where gold is 2.09:1 */
.tcard .stars,.rev .stars,.pd-rating .stars{color:#6E5A28}
.value-card .value-n{color:#6E5A28}
.au-count{color:#6E5A28}
.tcard .tattr{color:#5A6072}
footer span,footer .f-legal,footer p{color:#C6CBDD}

/* ---- The policy pages ----------------------------------------------------
   Narrow measure, generous leading, clear headings. These are read carefully,
   sometimes by somebody upset, and often on a phone — so they get a proper
   reading column rather than the shop's wider one.
   ------------------------------------------------------------------------ */
.policy-read h2{font-family:var(--head);font-weight:400;font-size:1.28rem;color:var(--navy);
  margin:38px 0 10px;letter-spacing:.01em}
.policy-read h3{font-family:var(--head);font-weight:500;font-size:1rem;color:var(--navy);
  margin:22px 0 8px}
.policy-read p{margin:0 0 14px;line-height:1.75}
.policy-read ul{margin:0 0 18px;padding-left:1.15rem}
.policy-read li{margin-bottom:9px;line-height:1.7}
.policy-read a{color:var(--navy);text-decoration:underline;text-underline-offset:2px;cursor:pointer}

/* A wide table on a narrow phone scrolls inside itself rather than pushing the
   whole page sideways. */
.policy-table{width:100%;border-collapse:collapse;margin:6px 0 22px;font-size:.9rem;display:block;
  overflow-x:auto;white-space:nowrap}
.policy-table th,.policy-table td{text-align:left;padding:9px 14px 9px 0;
  border-bottom:1px solid #EAE5D8;vertical-align:top}
.policy-table th{font-family:var(--head);font-weight:500;font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:#5a6072}
@media(min-width:720px){.policy-table{display:table;white-space:normal}}

/* A photograph inside a policy page. Full measure, softly rounded, with the
   caption doing the work the alt text cannot — saying what you are looking at
   to somebody who can already see it. */
.policy-figure{margin:26px 0 30px}
.policy-figure img{width:100%;height:auto;display:block;border-radius:8px;
  border:1px solid var(--line)}
.policy-figure figcaption{font-family:var(--head);font-size:.78rem;letter-spacing:.04em;
  color:#5a6072;margin-top:10px;text-align:center}

/* The one paragraph on the returns page that must not be skimmed past: a
   personalised keepsake carries no right to change your mind, and somebody
   finding that out after ordering is the complaint nobody wants to have. */
.policy-callout{background:#FAF8F2;border-left:3px solid #6E5A28;border-radius:0 6px 6px 0;
  padding:18px 20px 4px;margin:26px 0 30px}
.policy-callout h3{margin-top:0}
.policy-callout p{font-size:.94rem}

/* No rule of its own. `.foot-news` above already draws one, and a second
   divider 30px below it read as a mistake rather than as structure. */
.foot-legal-links{display:flex;flex-wrap:wrap;gap:6px 22px;margin:14px 0 0}
.foot-legal-links a{color:#C6CBDD;font-size:.82rem;cursor:pointer;text-decoration:none;
  min-height:44px;display:flex;align-items:center}
.foot-legal-links a[hidden]{display:none}
.foot-legal-links a:hover{color:#F6F3EA;text-decoration:underline}
.hero .tagline,.hero-photo-bg .tagline{color:#F6F3EA}
.drawer-empty{color:#5A6072}
.perso-ctx{color:#5A6072}
footer .foot-legal,footer small,footer .legal span{color:#C6CBDD}
/* a readable scrim behind anything set over the hero photograph */
.hero-photo-bg .hero-copy{position:relative;z-index:2}
.hero-photo-bg::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(15,25,68,.62) 0%,rgba(15,25,68,.34) 55%,rgba(15,25,68,.12) 100%);pointer-events:none}

/* the footer headings changed level, so they take the footer's colour rather than the page's */
footer h2,footer h3,footer h4,#foot h2,#foot h3,#foot h4{color:#F6F3EA}
/* part 3.3: anything a person taps is at least 44 by 44, padding included */
.dd-link{min-height:44px;display:flex;align-items:center}
.mm-list a,.dd-col a,.mega a{min-height:44px;display:flex;align-items:center}
.search-bar input,.search-bar button{min-height:46px}
.icon-btn{width:46px;height:46px;flex:0 0 46px;box-sizing:border-box}
nav.primary > a,nav.primary > .has-menu > .navitem{min-height:44px;display:inline-flex;align-items:center}
footer a,footer nav a,.foot-col a,.foot-links a{min-height:44px;display:flex;align-items:center;width:fit-content;max-width:100%}
.foot-links{display:flex;flex-wrap:wrap;gap:0 22px}
.foot-bottom a{display:inline-flex}