/* ==========================================================================
ATRANI® Contact page — all styles namespaced under .atr-contact
========================================================================== */
.atr-contact{
--atr-bg:#FFFEFD;
--atr-ink:#484848;
--atr-ink-strong:#272727;
--atr-dark:#181B1D;
--atr-line:rgba(72,72,72,.16);
--atr-accent:linear-gradient(270deg,#FF9C9F 2%,#EFC885 98%);
--atr-hero:linear-gradient(178deg,#F49EA1 0%,#F9D79E 97%);
--atr-radius:12px;
/* Copied verbatim from the theme's --font-body-family. Yes, `system_ui` has an
underscore and is therefore an unmatched family name that every browser skips —
that is exactly what the rest of your store does, so keeping it byte-identical
means this page resolves to the same font as every other page. Do not "fix" it
to system-ui here unless you change it in the theme too. */
--atr-font:system_ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif;
font-family:var(--atr-font);
color:var(--atr-ink);
background:var(--atr-bg);
max-width:1200px;
margin:0 auto;
padding:0 20px 72px;
font-size:16px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
box-sizing:border-box;
}
.atr-contact *,
.atr-contact *::before,
.atr-contact *::after{box-sizing:border-box;}
.atr-contact p{margin:0;}
/* NOTE: no `color` here on purpose — component rules below own the colour, and a
descendant selector like `.atr-contact h2` would out-specify a class like
`.atr-h2--light` and silently break the dark panel. */
.atr-contact h1,
.atr-contact h2,
.atr-contact h3{margin:0;font-weight:500;letter-spacing:-.02em;line-height:1.25;}
.atr-contact ol,
.atr-contact ul{margin:0;padding:0;list-style:none;}
.atr-contact a{color:inherit;}
/* ---------- hero ---------- */
.atr-hero{
background:var(--atr-hero);
border-radius:24px;
padding:76px 56px 84px;
margin:8px 0 28px;
}
.atr-hero__inner{max-width:640px;}
.atr-eyebrow{
display:inline-block;
font-size:12px;
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
color:#FFFEFD;
background:#1F2224;
padding:7px 15px;
border-radius:999px;
margin-bottom:24px;
}
/* Dark ink on the brand gradient rather than white: the store's own hero uses
white here, but it drops to ~2:1 contrast over the peach end of the ramp.
Dark ink matches the "designed with intent." treatment and clears AA. */
.atr-hero__title{
font-size:clamp(38px,5.6vw,64px);
line-height:1.06;
letter-spacing:-.03em;
color:#1F2224;
margin-bottom:20px;
}
.atr-hero__sub{
font-size:17px;
line-height:1.55;
color:rgba(31,34,36,.82);
max-width:30em;
}
/* ---------- facts strip ---------- */
.atr-facts{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1px;
background:var(--atr-line);
border:1px solid var(--atr-line);
border-radius:var(--atr-radius);
overflow:hidden;
margin-bottom:80px;
}
.atr-fact{
background:var(--atr-bg);
padding:26px 28px 28px;
display:flex;
flex-direction:column;
gap:7px;
}
.atr-fact__label{
font-size:11px;
font-weight:700;
letter-spacing:.13em;
text-transform:uppercase;
color:#8A8A8A;
}
.atr-fact__value{
font-size:20px;
font-weight:500;
letter-spacing:-.02em;
color:var(--atr-ink-strong);
word-break:break-word;
}
.atr-fact__value--link{
text-decoration:none;
background-image:var(--atr-accent);
background-repeat:no-repeat;
background-size:100% 2px;
background-position:0 100%;
padding-bottom:2px;
transition:background-size .2s ease;
}
.atr-fact__value--link:hover{background-size:100% 6px;}
.atr-fact__note{font-size:14px;color:#7C7C7C;line-height:1.45;}
/* ---------- shared block header ---------- */
.atr-block{margin-bottom:80px;}
.atr-block__head{max-width:38em;margin-bottom:36px;}
.atr-h2{
font-size:clamp(26px,3.2vw,36px);
letter-spacing:-.028em;
margin-bottom:12px;
color:var(--atr-ink-strong);
}
.atr-h2--light{color:#FFFEFD;}
.atr-lede{font-size:17px;color:#6F6F6F;line-height:1.55;}
.atr-lede--light{color:rgba(255,255,255,.75);}
/* ---------- numbered steps ---------- */
.atr-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.atr-step{
display:flex;
gap:16px;
align-items:flex-start;
border-top:2px solid var(--atr-ink-strong);
padding-top:20px;
}
.atr-step__num{
font-size:13px;
font-weight:700;
letter-spacing:.06em;
color:#B4692F;
flex:0 0 auto;
padding-top:3px;
}
.atr-step__title{font-size:18px;margin-bottom:7px;color:var(--atr-ink-strong);}
.atr-step__body{font-size:15px;color:#6F6F6F;line-height:1.55;}
/* ---------- quick answer cards ---------- */
.atr-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.atr-card{
border:1px solid var(--atr-line);
border-radius:var(--atr-radius);
padding:30px 28px;
display:flex;
flex-direction:column;
background:var(--atr-bg);
transition:border-color .2s ease, transform .2s ease;
}
.atr-card:hover{border-color:rgba(72,72,72,.42);transform:translateY(-2px);}
.atr-card__title{font-size:19px;margin-bottom:12px;color:var(--atr-ink-strong);}
.atr-card__body{font-size:15px;color:#6F6F6F;line-height:1.6;margin-bottom:22px;flex:1 1 auto;}
.atr-card__link{
font-size:14px;
font-weight:700;
letter-spacing:-.01em;
text-decoration:none;
color:var(--atr-ink-strong);
align-self:flex-start;
border-bottom:1.5px solid transparent;
background-image:var(--atr-accent);
background-repeat:no-repeat;
background-size:0% 2px;
background-position:0 100%;
padding-bottom:3px;
transition:background-size .22s ease;
}
.atr-card__link:hover{background-size:100% 2px;}
/* ---------- form ---------- */
.atr-formwrap{
background:var(--atr-dark);
border-radius:24px;
padding:64px 56px 60px;
margin-bottom:64px;
}
.atr-formwrap__head{max-width:34em;margin-bottom:38px;}
.atr-form__row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;}
.atr-field{display:flex;flex-direction:column;gap:9px;margin-bottom:0;}
.atr-form > .atr-field{margin-bottom:26px;}
.atr-label{
font-size:12px;
font-weight:700;
letter-spacing:.11em;
text-transform:uppercase;
color:rgba(255,255,255,.72);
}
.atr-req,.atr-opt{
font-weight:400;
letter-spacing:.04em;
text-transform:none;
font-size:11px;
color:rgba(255,255,255,.42);
margin-left:5px;
}
.atr-input{
font-family:var(--atr-font);
font-size:15px;
color:#fff;
background:rgba(255,255,255,.05);
border:0.8px solid rgba(255,255,255,.26);
border-radius:8px;
padding:13px 14px;
width:100%;
transition:border-color .18s ease, background .18s ease;
-webkit-appearance:none;
appearance:none;
}
.atr-input::placeholder{color:rgba(255,255,255,.34);}
.atr-input:focus{
outline:none;
border-color:#F49EA1;
background:rgba(255,255,255,.09);
}
.atr-textarea{resize:vertical;min-height:150px;line-height:1.55;}
.atr-form__foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.atr-btn{
font-family:var(--atr-font);
font-size:15px;
font-weight:700;
letter-spacing:-.01em;
color:var(--atr-dark);
background:#FFFEFD;
border:none;
border-radius:18px;
min-height:47px;
padding:0 30px;
cursor:pointer;
transition:opacity .18s ease, transform .18s ease;
}
.atr-btn:hover{opacity:.88;transform:translateY(-1px);}
.atr-btn:active{transform:translateY(0);}
.atr-form__note{font-size:14px;color:rgba(255,255,255,.5);}
/* ---------- closer ---------- */
.atr-closer{text-align:center;padding-top:8px;}
.atr-closer__text{
font-size:clamp(22px,3vw,30px);
font-weight:500;
letter-spacing:-.028em;
color:var(--atr-ink-strong);
margin-bottom:10px;
}
.atr-closer__sub{font-size:16px;color:#6F6F6F;margin-bottom:16px;}
.atr-closer__sign{font-size:15px;color:#8A8A8A;}
/* ---------- responsive ---------- */
@media screen and (max-width:989px){
.atr-facts{grid-template-columns:1fr;}
.atr-steps{grid-template-columns:1fr;gap:22px;}
.atr-cards{grid-template-columns:1fr;}
.atr-hero{padding:60px 36px 64px;}
.atr-formwrap{padding:52px 36px 48px;}
}
@media screen and (max-width:749px){
.atr-contact{padding:0 16px 56px;}
.atr-hero{padding:48px 26px 52px;border-radius:18px;}
.atr-hero__title br{display:none;}
.atr-block,.atr-facts{margin-bottom:60px;}
.atr-formwrap{padding:44px 24px 40px;border-radius:18px;}
.atr-form__row{grid-template-columns:1fr;gap:0;margin-bottom:0;}
.atr-form__row .atr-field{margin-bottom:22px;}
.atr-btn{width:100%;}
.atr-form__foot{gap:14px;}
.atr-form__note{text-align:center;width:100%;}
}
