/* ============================================================
   Anhui Tianle / Interpac — site styles
   Inter throughout. White surfaces, one teal accent, roomy grid.
   ============================================================ */
:root{
  --stock:#FBF7F0;          /* page — warm cream, keyed to the banner artwork */
  --board:#F2E9DC;          /* tinted band */
  --board-2:#F7F1E7;
  --surface:#FFFDF9;        /* cards, tables, inputs — warm white on the cream */
  --white:#FFFFFF;

  --ink:#2A1E17;           /* espresso — headings */
  --ink-70:#57463C;        /* body copy */
  --ink-45:#776353;        /* captions, meta */

  --rule:#E5D9C8;          /* hairline */
  --rule-soft:#EFE6D9;
  --rule-strong:#D8C7B0;

  --accent:#6B4A32;        /* coffee */
  --accent-dk:#4E3423;
  --accent-tint:rgba(107,74,50,.08);
  --shadow:rgba(62,43,31,.16);

  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',Helvetica,Arial,sans-serif;

  --t-hero:clamp(2.15rem,5.2vw,3.5rem);
  --t-h2:clamp(1.5rem,3vw,2.1rem);
  --t-h3:1.1875rem; --t-lede:1.1875rem; --t-body:1.0625rem;
  --t-sm:.9375rem; --t-xs:.8125rem; --t-micro:.75rem;
  --lh-body:1.65; --measure:66ch;
  --sp-1:.5rem; --sp-2:.875rem; --sp-3:1.5rem; --sp-4:2.25rem; --sp-5:3.25rem; --sp-6:5.5rem;
  --radius:12px; --radius-sm:8px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--stock);color:var(--ink-70);
  font-family:var(--sans);font-size:var(--t-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none;text-underline-offset:.16em}
a:hover{color:var(--accent-dk);text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3,h4{color:var(--ink);margin:0;font-weight:700;line-height:1.16;letter-spacing:-.018em}
h1{font-weight:800;letter-spacing:-.028em}
p{margin:0}
strong{color:var(--ink);font-weight:600}
.shell{max-width:1140px;margin:0 auto;padding:0 28px}
.eyebrow{font-size:var(--t-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}

.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:200;border-radius:0 0 var(--radius-sm) 0}
.skip:focus{left:0;top:0}

/* registration mark */
/* Interpac brand wordmark in the masthead */
.wordmark .mark{height:24px;width:auto;flex:none;display:block}

/* masthead */
.mast{border-bottom:1px solid var(--rule);background:rgba(251,247,240,.92);backdrop-filter:saturate(180%) blur(8px);position:sticky;top:0;z-index:60}
.mast .shell{display:flex;align-items:center;gap:1.5rem;min-height:70px;flex-wrap:nowrap}
.wordmark{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);flex:none}
.wordmark b{font-size:1.0625rem;font-weight:700;letter-spacing:-.02em;line-height:1.05;display:block}
.wordmark small{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
.mast nav{margin-left:auto;display:flex;gap:1.25rem;align-items:center;flex-wrap:nowrap}
.mast nav a{font-size:var(--t-sm);font-weight:500;color:var(--ink-70);text-decoration:none;white-space:nowrap}
.mast nav a:hover,.mast nav a[aria-current]{color:var(--ink)}
.langs{display:flex;gap:.6rem;align-items:center;font-size:var(--t-xs);font-weight:500}
.langs a{color:var(--ink-45);text-decoration:none}
.langs a:hover{color:var(--accent)}
.langs span[aria-current]{color:var(--ink)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--sans);font-size:var(--t-sm);font-weight:600;line-height:1.2;
  padding:.78rem 1.35rem;border:1px solid var(--accent);background:var(--accent);
  color:#fff;text-decoration:none;cursor:pointer;border-radius:var(--radius-sm);transition:background .15s,border-color .15s,box-shadow .15s}
.btn:hover{background:var(--accent-dk);border-color:var(--accent-dk);color:#fff;text-decoration:none}
.btn.ghost{background:var(--surface);color:var(--accent)}
.btn.ghost:hover{background:var(--accent-tint);color:var(--accent-dk)}
.btn.wide{width:100%}
.btn.lg{padding:.9rem 1.6rem;font-size:1rem}

/* breadcrumbs */
.crumbs{border-bottom:1px solid var(--rule);background:var(--board-2);font-size:var(--t-xs)}
.crumbs .shell{padding-top:.7rem;padding-bottom:.7rem;display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.crumbs a{color:var(--ink-45);text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.crumbs .sep{color:var(--rule)}
.crumbs [aria-current]{color:var(--ink-70)}

/* section shell */
section.band{padding:var(--sp-6) 0;border-top:1px solid var(--rule)}
section.band:first-of-type{border-top:0}
section.band.dark{background:var(--ink);color:rgba(255,255,255,.78);border-top:0}
section.band.tint{background:var(--board);border-top:1px solid var(--rule)}
.dark h2,.dark h3,.dark h2.hd{color:#fff}
h2.hd{margin:0 0 .7rem;font-size:var(--t-h2);font-weight:700;letter-spacing:-.02em;max-width:26ch}
p.sub{margin:0 0 var(--sp-4);font-size:1.0625rem;color:var(--ink-70);max-width:var(--measure);line-height:1.62}
.dark p.sub{color:rgba(255,255,255,.7)}

/* hero */
.hero{padding:var(--sp-6) 0 var(--sp-5)}
.hero h1{margin:0 0 var(--sp-3);font-size:var(--t-hero);line-height:1.05;max-width:16ch}
.hero .lede{margin:0;font-size:var(--t-lede);line-height:1.55;color:var(--ink-70);max-width:52ch}
.actions{margin-top:var(--sp-4);display:flex;gap:.8rem;flex-wrap:wrap}
/* full-bleed artwork banner — the supplied image carries its own headline,
   so nothing is overlaid on it; the crawlable H1 sits in .intro below. */
.banner-art{background:var(--stock)}
/* The artwork carries no text of its own — the whole hero is real HTML laid
   over the empty left half, full-bleed, with no visible edges anywhere:
   the repainted photo background is exactly --stock. */
.banner-frame{position:relative;display:grid;width:100%;max-width:1440px;margin-inline:auto}
.banner-photo{grid-area:1/1;width:100%;height:auto;align-self:end;display:block}
.banner-copy{grid-area:1/1;align-self:center;width:100%}
.banner-copy .shell{width:100%}
.banner-inner{max-width:min(31rem,42vw)}

.pill{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 1.15rem;
  padding:.45rem 1rem .45rem .8rem;border-radius:999px;background:var(--board);
  color:var(--accent-dk);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.09em;text-transform:uppercase}
.pill svg{width:1.05rem;height:1.05rem;flex:none}

.banner-copy h1{margin:0;line-height:1.1;letter-spacing:-.015em}
.banner-copy .bl-lead{display:block;font-size:clamp(1.15rem,1.75vw,1.7rem);font-weight:500;color:var(--ink)}
.banner-copy .bl-big{display:block;font-size:clamp(1.8rem,2.85vw,2.8rem);font-weight:800;color:var(--ink);
  letter-spacing:-.025em;margin:.08em 0 .16em}
.banner-copy .bl-sub{display:block;font-size:clamp(.95rem,1.35vw,1.3rem);font-weight:400;color:var(--ink-70);letter-spacing:0}

.banner-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;
  list-style:none;margin:1.9rem 0 0;padding:0}
.banner-feats li{display:flex;flex-direction:column;gap:.3rem}
.banner-feats .fi{display:flex;align-items:center;justify-content:center;width:2.6rem;height:2.6rem;
  border:1.5px solid var(--rule-strong);border-radius:50%;color:var(--accent);margin-bottom:.45rem}
.banner-feats .fi svg{width:1.3rem;height:1.3rem}
.banner-feats b{font-size:.95rem;font-weight:700;color:var(--ink);line-height:1.25}
.banner-feats .fd{font-size:var(--t-xs);color:var(--ink-45);line-height:1.45}

.banner-copy .actions{margin-top:1.9rem}
.btn svg{width:1.15rem;height:1.15rem;flex:none}

/* full-width reassurance strip closing the hero */
.trust-strip{max-width:1440px;margin-inline:auto;background:var(--accent-dk);color:#fff}
.trust-strip ul{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem 2rem;
  list-style:none;margin:0;padding:1.15rem 0}
.trust-strip li{display:flex;align-items:center;gap:.75rem;min-width:0}
.trust-strip .ti{display:flex;flex:none;color:rgba(255,255,255,.9)}
.trust-strip .ti svg{width:1.55rem;height:1.55rem}
.trust-strip .tt{display:flex;flex-direction:column;min-width:0}
.trust-strip b{font-size:.95rem;font-weight:700;line-height:1.2}
.trust-strip .tt span{font-size:var(--t-xs);color:rgba(255,255,255,.72);line-height:1.35}

/* headline band directly under the banner */
.intro{background:var(--stock);padding:var(--sp-5) 0 var(--sp-4)}
.intro .eyebrow{margin:0 0 .75rem}
.intro h1{font-size:clamp(1.9rem,3.4vw,2.75rem);line-height:1.1;margin:0 0 var(--sp-3);max-width:22ch}
.intro .lead-answer{margin:0;max-width:62ch}
.intro .actions{margin-top:var(--sp-4)}

/* category grid — taller cards */
.grid.cat-grid{grid-template-columns:repeat(4,1fr)}
.cat-grid .card img{aspect-ratio:1/1}

/* product photo strip */
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(118px,1fr);gap:1rem;
  margin:var(--sp-3) 0 0;overflow-x:auto;scroll-snap-type:x proximity;
  padding-bottom:.4rem;scrollbar-width:thin}
.strip img{width:100%;aspect-ratio:1/1;object-fit:cover;border:1px solid var(--rule);
  border-radius:var(--radius-sm);background:var(--surface);scroll-snap-align:start}

/* trust row */
.trust{display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;margin:var(--sp-4) 0 0;padding:var(--sp-3) 0 0;
  border-top:1px solid var(--rule);list-style:none}
.trust li{display:flex;flex-direction:column;gap:.15rem}
.trust b{color:var(--ink);font-weight:700;font-size:1.05rem}
.trust span{font-size:var(--t-xs);color:var(--ink-45)}

/* prose */
.prose{max-width:var(--measure)}
.prose > *{max-width:var(--measure)}
.prose h2{margin:var(--sp-5) 0 .6rem;font-size:var(--t-h2)}
.prose h3{margin:var(--sp-4) 0 .5rem;font-size:1.2rem}
.prose p,.prose li{font-size:1.05rem;line-height:1.72;color:var(--ink-70)}
.prose ul,.prose ol{padding-left:1.2rem}
.prose li{margin:.4rem 0}
.prose a{text-decoration:underline}
.lead-answer{font-size:1.16rem;line-height:1.6;color:var(--ink);font-weight:450;margin:0 0 var(--sp-4);max-width:60ch}

/* card grid */
.grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin:var(--sp-3) 0 0}
.card{border:1px solid var(--rule);background:var(--surface);display:flex;flex-direction:column;
  text-decoration:none;color:var(--ink);border-radius:var(--radius);overflow:hidden;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.card img{border-bottom:1px solid var(--rule);aspect-ratio:4/3;object-fit:cover;background:var(--board)}
.card .cbody{padding:1.15rem 1.25rem 1.35rem}
.card h3{margin:0 0 .35rem;font-size:1.0938rem;letter-spacing:-.012em}
.card p{margin:0;font-size:var(--t-sm);line-height:1.55;color:var(--ink-70)}
.card .meta{margin-top:.7rem;font-size:var(--t-xs);font-weight:500;color:var(--ink-45)}
.card:hover{border-color:var(--rule-strong);box-shadow:0 6px 24px -12px var(--shadow);transform:translateY(-2px)}
.card:hover h3{color:var(--accent)}
.card:hover{text-decoration:none}

/* priority tag */
.tag{display:inline-block;font-size:var(--t-micro);font-weight:600;
  letter-spacing:.04em;padding:.22rem .55rem;text-transform:uppercase;border-radius:999px;margin-bottom:.6rem}
.tag.e{background:var(--ink);color:#fff}
.tag.r{background:var(--accent-tint);color:var(--accent-dk)}
.tag.o{background:var(--board);color:var(--ink-45);border:1px solid var(--rule)}

/* spec table */
table.spec,table.lt{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--rule);
  background:var(--surface);font-size:var(--t-sm);margin:var(--sp-3) 0;border-radius:var(--radius);overflow:hidden}
table.spec th,table.spec td,table.lt th,table.lt td{padding:.85rem 1.05rem;text-align:left;
  border-bottom:1px solid var(--rule-soft);line-height:1.55;vertical-align:top}
table.spec th,table.lt th{font-size:.75rem;font-weight:600;letter-spacing:.03em;color:var(--ink-45);
  background:var(--board-2);text-transform:uppercase}
table.spec tr:last-child td,table.lt tr:last-child td{border-bottom:0}
table.spec td:first-child{font-weight:600;color:var(--ink);width:34%}
.tbl-scroll{overflow-x:auto}

/* two-column feature */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-5);align-items:center}
.split > img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--rule);border-radius:var(--radius);background:var(--board)}
.hero .split h1{font-size:clamp(1.8rem,3.4vw,2.65rem);letter-spacing:-.025em;max-width:none}
.hero .split .lead-answer{font-size:1.1rem}
.hero > .shell > h1{font-size:clamp(1.95rem,3.6vw,2.9rem);letter-spacing:-.025em;max-width:20ch}

/* stat strip */
.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;margin:var(--sp-3) 0 0}
.proof div{padding:1.35rem 1.4rem;background:var(--surface);display:flex;flex-direction:column;gap:.35rem}
.proof .k{font-size:1.5rem;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.1}
.proof .v{font-size:var(--t-xs);color:var(--ink-45);line-height:1.5}

/* steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem;margin:var(--sp-3) 0 0}
.step{padding:1.4rem 1.45rem 1.5rem;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius)}
.step .n{font-size:.8125rem;font-weight:600;color:var(--accent);letter-spacing:.03em;display:block}
.step h3{margin:.5rem 0 .4rem;font-size:1.075rem;letter-spacing:-.012em}
.step p{margin:0;font-size:var(--t-sm);color:var(--ink-70);line-height:1.62}

/* faq */
.faq{max-width:var(--measure);margin:var(--sp-3) 0 0;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{padding:1.15rem 2rem 1.15rem 0;cursor:pointer;font-size:1.06rem;font-weight:600;color:var(--ink);
  letter-spacing:-.01em;line-height:1.5;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.15rem;top:1rem;font-size:1.25rem;color:var(--accent);font-weight:400;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq details p{margin:0 0 1.2rem;font-size:1.03rem;line-height:1.7;color:var(--ink-70);max-width:64ch}

/* callout */
.note{border:1px solid var(--rule);background:var(--accent-tint);
  padding:1.2rem 1.4rem;max-width:var(--measure);margin:var(--sp-3) 0;border-radius:var(--radius)}
.note p{margin:0;font-size:var(--t-sm);line-height:1.65;color:var(--ink-70)}
.note strong{color:var(--accent-dk)}

/* article */
article.guide{max-width:var(--measure);margin:0 auto}
article.guide .kicker{font-size:var(--t-xs);font-weight:600;color:var(--accent);letter-spacing:.08em;text-transform:uppercase}
article.guide h1{font-size:clamp(1.85rem,4vw,2.7rem);letter-spacing:-.028em;margin:.55rem 0 .6rem;line-height:1.1}
article.guide .byline{font-size:var(--t-xs);color:var(--ink-45);margin:0 0 var(--sp-4)}
.takeaways{border:1px solid var(--rule);background:var(--board);padding:1.3rem 1.5rem;margin:var(--sp-3) 0;border-radius:var(--radius)}
.takeaways h2{margin:0 0 .6rem;font-size:.8125rem;color:var(--ink-45);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.takeaways ul{margin:0;padding-left:1.15rem}
.takeaways li{margin:.45rem 0;font-size:1rem;line-height:1.6}

/* related list */
.related{list-style:none;padding:0;margin:var(--sp-2) 0 0;display:grid;gap:.6rem}
.related a{display:block;padding:.9rem 1.1rem;border:1px solid var(--rule);background:var(--surface);
  text-decoration:none;color:var(--ink);font-size:var(--t-sm);border-radius:var(--radius-sm);transition:border-color .15s,background .15s}
.related a:hover{border-color:var(--accent);background:var(--accent-tint);text-decoration:none}

/* inquiry form */
.form-wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);border:1px solid var(--rule);margin:var(--sp-3) 0 0;border-radius:var(--radius);overflow:hidden}
.form-main{background:var(--surface);padding:1.9rem}
.form-side{background:var(--board);padding:1.9rem;border-left:1px solid var(--rule)}
.fld{display:block;margin:0 0 1.1rem}
.fld > span{display:block;font-size:var(--t-xs);font-weight:600;color:var(--ink-70);margin:0 0 .4rem}
.fld input,.fld select,.fld textarea{width:100%;padding:.68rem .8rem;font-family:var(--sans);
  font-size:.95rem;line-height:1.4;background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:var(--radius-sm)}
.fld textarea{min-height:5.5rem;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--accent);outline:2px solid var(--accent-tint);outline-offset:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.hint{font-size:var(--t-xs);color:var(--ink-45);margin:.8rem 0 0;line-height:1.6}

/* footer */
footer{border-top:1px solid var(--rule);background:var(--board-2);padding:var(--sp-5) 0 var(--sp-5);font-size:var(--t-sm);margin-top:var(--sp-6)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;margin-bottom:1.8rem}
footer h4{margin:0 0 .7rem;font-size:var(--t-xs);font-weight:700;color:var(--ink);letter-spacing:.02em;text-transform:uppercase}
footer nav{display:flex;flex-direction:column;gap:.5rem}
footer nav a,footer li{color:var(--ink-70);text-decoration:none;line-height:1.5}
footer ul{margin:0;padding:0;list-style:none}
footer a:hover{color:var(--accent)}
.fine{font-size:var(--t-xs);color:var(--ink-45);line-height:1.65;max-width:92ch}

/* Masthead stays on ONE row at every width. Below 1140px the tagline goes,
   below 1000px the nav collapses and the quote button shrinks — otherwise the
   nav and the button wrap onto lines of their own. */
@media (max-width:999px){
  .mast .shell{gap:.7rem;min-height:60px}
  .banner-frame{display:block}
  .banner-copy{width:auto}
  .banner-copy .shell{padding-top:var(--sp-4);padding-bottom:var(--sp-3)}
  .banner-inner{max-width:none}
  .banner-photo{aspect-ratio:16/10;object-fit:cover;object-position:100% 50%}
  .banner-art{display:block}
  .trust-strip ul{grid-template-columns:repeat(2,1fr)}
  .mast nav{display:none}
  .mast .wordmark b{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .mast .wordmark .mark{height:21px}
  .mast .langs{margin-left:auto;gap:.5rem}
  .mast .btn{padding:.5rem .9rem;font-size:var(--t-xs);white-space:nowrap;flex:none}
}

@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:var(--sp-4)}
  .grid.cat-grid{grid-template-columns:repeat(2,1fr)}
  .form-wrap{grid-template-columns:1fr}
  .form-side{border-left:0;border-top:1px solid var(--rule)}
}
@media (max-width:560px){
  /* three columns become unreadably narrow on a phone */
  .banner-feats{grid-template-columns:1fr;gap:1rem}
  .banner-feats li{flex-direction:row;align-items:flex-start;gap:.85rem;flex-wrap:wrap}
  .banner-feats .fi{margin-bottom:0;width:2.3rem;height:2.3rem}
  .banner-feats b{flex:1 0 60%}
  .banner-feats .fd{flex:1 0 100%;padding-left:3.15rem;margin-top:-.55rem}
  .trust-strip ul{grid-template-columns:1fr;gap:.85rem;padding:1rem 0}
}

@media (max-width:720px){
  :root{--sp-6:3.75rem;--sp-5:2.6rem}
  .grid.cat-grid{grid-template-columns:1fr}
  .shell{padding:0 20px}
  .hero{padding:var(--sp-5) 0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto}}