/* ==========================================================================
   Circle-E Clothing Co. — circleeclothing.com

   RULES OF THE DESIGN. Break these and it stops being the same site:
   1. Two colors. #000 and #fff. No greys, no rgba, no opacity for hierarchy.
   2. Black sections get NO borders. Separation comes from inversion and space.
   3. White sections get HEAVY black rules (3px+). Never hairlines.
   4. Hover states invert or displace. They never fade.
   5. border-radius is 0. Everywhere. Forever.
   6. Hierarchy is size, weight and width — not softness.

   TYPE: Bank Sans EF, self-hosted from assets/fonts/.
   See the font licensing warning in README.md before this goes live.
   ========================================================================== */

/* ---- Bank Sans EF ---- */
@font-face{
  font-family:'BankSans';
  src:url('../fonts/banksans-light.woff2') format('woff2');
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'BankSans';
  src:url('../fonts/banksans-regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'BankSans';
  src:url('../fonts/banksans-medium.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'BankSans';
  src:url('../fonts/banksans-bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
/* Condensed bold is available but NOT used — headings and service labels are set
   in the regular width. Declared here only so it can be dropped in later; an
   unused @font-face never downloads, so it costs nothing to leave. */
@font-face{
  font-family:'BankSansCond';
  src:url('../fonts/banksans-cond-bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

/* ---- Tokens ---- */
:root{
  --black:#000;
  --white:#fff;

  /* One family, regular width, everywhere. Weight and size do the work. */
  --font:      'BankSans', 'Bank Gothic', 'Trebuchet MS', sans-serif;
  --font-cond: 'BankSansCond', 'BankSans', 'Bank Gothic', sans-serif; /* unused */

  --gut: clamp(18px, 4.5vw, 64px);
  --bar-h: 64px;

  --rule: 3px;      /* standard heavy rule, black on white only */
  --rule-fat: 6px;  /* section-scale rule */
}

/* ---- Reset ---- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--black); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:var(--font);
  font-weight:400;
  font-size:clamp(15px,.5vw + 13.8px,17px);
  line-height:1.5;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

[id]{ scroll-margin-top:var(--bar-h); }

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--white); color:var(--black);
  padding:14px 20px; text-decoration:none;
  font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:12px;
}
.skip:focus{ left:0; top:0; }

/* Focus ring: a hard block, never a glow */
:focus-visible{ outline:var(--rule) solid var(--white); outline-offset:0; }
.sec--white :focus-visible,
.foot :focus-visible{ outline-color:var(--black); }

/* ---- Placeholder marker ---- */
.ph{
  display:inline;
  background:var(--white); color:var(--black);
  padding:.06em .28em;
  font-weight:500;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.sec--white .ph, .foot .ph{ background:var(--black); color:var(--white); }

/* ==========================================================================
   HEADER — solid black slab, no border
   ========================================================================== */
.bar{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; gap:18px;
  height:var(--bar-h);
  padding:0 var(--gut);
  background:var(--black);
}
.bar__brand{
  display:flex; align-items:center;
  margin-right:auto; min-width:0; text-decoration:none;
  padding:6px 0;
}
.bar__brand img{
  height:20px; width:auto;   /* both set — never let the HTML attrs squash it */
  transition:transform .12s steps(2);
}
.bar__brand:hover img{ transform:translateX(5px); }

.nav{ display:flex; align-items:center; gap:clamp(10px,1.4vw,26px); }
.nav a{
  font-weight:500; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none;
  padding:6px 8px;
}
.nav a:hover{ background:var(--white); color:var(--black); }
.nav__cta{
  background:var(--white); color:var(--black);
  font-weight:700; padding:10px 18px !important;
}
.nav__cta:hover{ transform:translate(4px,0); }

.bar__toggle{
  display:none;
  background:var(--white); color:var(--black);
  border:0; width:46px; height:40px; cursor:pointer;
  align-items:center; justify-content:center;
}
.bar__toggle-bars{ display:grid; gap:4px; }
.bar__toggle-bars i{ display:block; width:20px; height:var(--rule); background:var(--black); }

@media (max-width: 900px){
  .bar__toggle{ display:flex; }
  .nav{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--black);
    padding:0 var(--gut) var(--gut);
    display:none;
  }
  .nav.is-open{ display:flex; }
  .nav a{
    padding:18px 0; font-size:15px; letter-spacing:.2em; font-weight:700;
  }
  .nav a:hover{ background:none; color:var(--white); }
  .nav__cta{
    margin-top:14px; text-align:center;
    padding:18px !important; font-size:15px !important;
  }
}

/* ==========================================================================
   STAGE — hero + service accordion
   ========================================================================== */
.stage{
  position:relative;
  min-height:calc(100svh - var(--bar-h));
  display:flex; align-items:center;
  padding:clamp(40px,6vh,90px) 0;
  overflow:hidden;
  background:var(--black);
}

/* Oversized mark, clipped to the left column. The clip is structural:
   without it the artwork grows into the text column when a panel opens
   and you get white type on white artwork. Do not remove overflow:hidden. */
.stage__art{
  position:absolute; top:0; left:0;
  width:46%;
  height:calc(100svh - var(--bar-h));
  max-height:100%;
  overflow:hidden;
  pointer-events:none; user-select:none;
}
.stage__art img{
  position:absolute; top:50%; left:0;
  height:min(152%, 152svh);
  width:auto; max-width:none;
  transform:translate(-44%,-50%);
}

.stage__inner{
  position:relative; z-index:1;
  width:100%; padding:0 var(--gut);
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:var(--gut);
}
.stage__col{ grid-column:2; min-width:0; }

.lockup{ margin:0 0 clamp(18px,2.6vh,30px); }
.lockup img{ width:clamp(215px, 33vw, 415px); height:auto; }

.lede{
  margin:0 0 clamp(26px,4vh,42px);
  max-width:40ch;
  font-weight:300;
  font-size:clamp(16px,.8vw + 14px,21px);
  line-height:1.62;
}

/* ---- Accordion: rows are slabs. No dividers, the flip is the divider.
   Set in the regular width, deliberately smaller than the wordmark above it,
   with real space held around the whole block so it reads as one unit. ---- */
.svc{
  max-width:560px;
  margin:clamp(30px,5vh,52px) 0;
}

.svc__h{ margin:0; font-size:inherit; font-weight:inherit; }

.svc__btn{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center; gap:clamp(12px,1.6vw,20px);
  width:100%;
  padding:clamp(13px,1.7vh,18px) clamp(12px,1.4vw,16px);
  background:var(--black); color:var(--white);
  border:0; cursor:pointer; text-align:left;
  font-family:var(--font); font-weight:700;
  font-size:clamp(14px,1.15vw,19px);
  line-height:1.05; letter-spacing:.07em; text-transform:uppercase;
  transition:background .1s steps(1), color .1s steps(1), padding-left .1s steps(2);
}
.svc__num{
  font-weight:500;
  font-size:clamp(10px,.7vw,12px);
  letter-spacing:.1em;
}
.svc__btn:hover{
  background:var(--white); color:var(--black);
  padding-left:clamp(20px,2.4vw,30px);
}
.svc__btn[aria-expanded="true"]{
  background:var(--white); color:var(--black);
  padding-left:clamp(10px,1.4vw,16px);
}

/* + / − drawn in CSS so it stays square */
.svc__sign{ position:relative; width:15px; height:15px; align-self:center; }
.svc__sign::before,
.svc__sign::after{ content:""; position:absolute; background:currentColor; }
.svc__sign::before{ left:0; top:6px; width:15px; height:var(--rule); }
.svc__sign::after{ left:6px; top:0; width:var(--rule); height:15px; }
.svc__btn[aria-expanded="true"] .svc__sign::after{ display:none; }

/* Panel: solid white slab, black rules inside are allowed */
.svc__wrap{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .2s steps(6);
  overflow:hidden;
  background:var(--white); color:var(--black);
}
.svc__wrap.is-open{ grid-template-rows:1fr; }
.svc__wrap[hidden]{ display:none; }
.svc__panel{ overflow:hidden; padding:0 clamp(12px,1.4vw,18px); }
.svc__wrap.is-open .svc__panel{
  padding:0 clamp(12px,1.4vw,18px) clamp(20px,2.4vw,26px);
}
.svc__panel > p{ margin:0; max-width:56ch; }

/* Rows sit flush; add breathing room only where a white block meets the list */
.svc__item + .svc__item{ margin-top:2px; }

@media (prefers-reduced-motion: reduce){
  .svc__wrap{ transition:none; }
  .svc__btn{ transition:none; }
}

.stage__actions{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:clamp(26px,4vh,42px);
}

/* Mobile: the mark does not go behind the type. Rule 1 forbids the opacity
   fade that would make an overlap readable, so the artwork becomes its own
   full-bleed band above the content instead. Hard blocks, stacked. */
@media (max-width: 900px){
  .stage{ display:block; }
  .stage__inner{ grid-template-columns:minmax(0,1fr); }
  .stage__col{ grid-column:1; }

  .stage__art{
    position:relative; top:auto; left:auto;
    width:100%;
    height:clamp(150px, 26svh, 230px);
    max-height:none;
    margin-bottom:clamp(22px, 3.4vh, 34px);
  }
  .stage__art img{
    top:50%; left:50%;
    height:auto; width:min(148%, 148vw);
    transform:translate(-50%,-50%);
  }

  .svc{ max-width:none; }
  .lede{ max-width:34ch; }
}

/* ==========================================================================
   BUTTONS — displacement, not fade
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:16px 28px;
  font-weight:700; font-size:12px;
  letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none; border:0;
  transition:transform .1s steps(2);
}
.btn:hover{ transform:translate(5px,0); }
.btn:active{ transform:translate(2px,2px); }

.btn--fill{ background:var(--white); color:var(--black); }
.btn--line{
  background:var(--black); color:var(--white);
  box-shadow:inset 0 0 0 var(--rule) var(--white);
}
.sec--white .btn--fill{ background:var(--black); color:var(--white); }
.sec--white .btn--line{
  background:var(--white); color:var(--black);
  box-shadow:inset 0 0 0 var(--rule) var(--black);
}
.btn--wide{ width:100%; }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.sec{ padding:clamp(60px,8vw,120px) 0; }
.sec--black{ background:var(--black); color:var(--white); }
.sec--white{ background:var(--white); color:var(--black); }

.wrap{ width:100%; max-width:1200px; margin:0 auto; padding:0 var(--gut); }
.wrap--split{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.5fr);
  gap:var(--gut); align-items:center;
}
@media (max-width: 900px){ .wrap--split{ grid-template-columns:minmax(0,1fr); } }

.eyebrow{
  margin:0 0 12px;
  font-weight:500; font-size:11px;
  letter-spacing:.34em; text-transform:uppercase;
}
.h2{
  margin:0 0 clamp(18px,2.6vw,30px);
  font-family:var(--font); font-weight:700;
  font-size:clamp(25px,4vw,54px);
  line-height:1.02; letter-spacing:.04em; text-transform:uppercase;
}
.h3{
  margin:0 0 clamp(14px,2vw,22px);
  font-family:var(--font); font-weight:700;
  font-size:clamp(20px,2.4vw,32px);
  line-height:1.04; letter-spacing:.05em; text-transform:uppercase;
}
.sec__lede{
  margin:0 0 clamp(32px,4.5vw,54px);
  max-width:52ch;
  font-weight:300;
  font-size:clamp(17px,1vw + 14px,23px);
  line-height:1.38;
}
.sec__actions{ display:flex; flex-wrap:wrap; gap:var(--rule-fat); }

/* Artwork block inside the quote section — separated by space, not a rule,
   because black sections take no borders. */
.quote__art{ margin-top:clamp(56px,8vw,110px); }
.quote__art .sec__lede{ margin-bottom:clamp(26px,3.4vw,40px); }

/* ---- Reviews: compact white band, black slabs. Populated by reviews.js ---- */
.reviews{ padding:clamp(40px,5vw,72px) 0; }

.reviews__head{
  display:flex; align-items:baseline; flex-wrap:wrap;
  gap:8px clamp(14px,1.8vw,26px);
  margin-bottom:clamp(20px,2.6vw,30px);
}
.reviews__score{
  font-family:var(--font); font-weight:700;
  font-size:clamp(28px,3.2vw,44px); line-height:1;
  letter-spacing:.02em;
}
.reviews__stars{ font-size:clamp(15px,1.5vw,20px); letter-spacing:.14em; }
.reviews__count{
  font-weight:500; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase;
}
.reviews__link{
  margin-left:auto;
  font-weight:700; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none; padding:4px 6px;
}
.reviews__link:hover{ background:var(--black); color:var(--white); }

.reviews__grid{
  display:grid; gap:var(--rule-fat);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.review{
  display:flex; flex-direction:column;
  padding:clamp(20px,2.2vw,28px);
  background:var(--black); color:var(--white);
}
.review__stars{ margin:0 0 12px; font-size:14px; letter-spacing:.14em; }
.review__text{
  margin:0 0 18px;
  font-weight:300; font-size:15px; line-height:1.55;
}
.review__who{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:6px 10px;
  margin-top:auto;
  font-weight:500; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
}
/* Google requires the author's name, profile link and photo alongside any
   review it serves. The avatar is the one image here that isn't pure black
   and white — greyscaled to stay as close to rule 1 as the terms allow. */
.review__avatar{
  width:30px; height:30px; flex:none;
  filter:grayscale(1) contrast(1.15);
}
.review__name{ text-decoration:none; }
.review__name:hover{ background:var(--white); color:var(--black); }
.review__when{ margin-left:auto; white-space:nowrap; }

.reviews__fallback{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(14px,2vw,26px);
  padding:clamp(20px,2.4vw,30px);
  background:var(--black); color:var(--white);
}
.reviews__fallback-msg{
  margin:0; flex:1 1 280px;
  font-weight:300; font-size:15px;
}
.reviews__fallback .btn--fill{ background:var(--white); color:var(--black); }
/* Unconfigured is a state you should notice, not one that blends in. */
#reviews-body.is-unconfigured .reviews__fallback-msg{
  font-weight:500; font-style:italic;
}

/* ---- Tiers: white slabs on a black section, fat black gaps as the rules.
   No outlines — rule 2. ---- */
.tiers{
  display:grid; gap:var(--rule-fat);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin-bottom:clamp(28px,3.6vw,44px);
}
.tier{
  display:flex; flex-direction:column;
  padding:clamp(24px,2.6vw,36px);
  background:var(--white); color:var(--black);
}
.tier__tag{
  margin:0 0 10px;
  font-weight:500; font-size:11px;
  letter-spacing:.3em; text-transform:uppercase;
}
.tier__h{
  margin:0 0 16px;
  font-family:var(--font); font-weight:700;
  font-size:clamp(15px,1.3vw,21px);
  line-height:1.1; letter-spacing:.06em; text-transform:uppercase;
}
.tier > p{ margin:0 0 18px; font-weight:300; font-size:15px; line-height:1.6; }

.tier__list{
  list-style:none; margin:0 0 20px; padding:0;
  border-top:var(--rule) solid var(--black);
}
.tier__list li{
  padding:11px 0;
  border-bottom:var(--rule) solid var(--black);
  font-weight:500; font-size:12px;
  letter-spacing:.09em; text-transform:uppercase;
}
.tier__price{
  margin:0;
  font-family:var(--font); font-weight:700;
  font-size:clamp(15px,1.3vw,21px);
  line-height:1.1; letter-spacing:.06em; text-transform:uppercase;
}
.tier__foot{ margin-top:auto; }
.tier .btn--fill{ background:var(--black); color:var(--white); }

/* ---- Cards: black slabs on white, white gaps as the rules ---- */
.grid{
  list-style:none; margin:0 0 clamp(6px,1vw,10px); padding:0;
  display:grid; gap:var(--rule-fat);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.card{
  padding:clamp(24px,2.6vw,36px);
  background:var(--black); color:var(--white);
}
.card__h{
  margin:0 0 14px;
  font-family:var(--font); font-weight:700;
  font-size:clamp(14px,1.15vw,18px);
  line-height:1.1; letter-spacing:.07em; text-transform:uppercase;
}
.card p{ margin:0; font-weight:300; font-size:15px; }

/* ---- Shop: white slabs on the black section ---- */
.shop{
  display:grid; gap:var(--rule-fat);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.shop__tile{
  display:flex; flex-direction:column; gap:10px;
  padding:clamp(26px,3vw,42px);
  min-height:180px; justify-content:flex-end;
  background:var(--white); color:var(--black);
  text-decoration:none;
  transition:transform .1s steps(2);
}
.shop__tile[href]:hover{ transform:translate(6px,0); }
/* Not-live marker: a hatched bar, since a grey "disabled" state is not
   available under rule 1. */
.shop__tile--soon{ position:relative; }
.shop__tile--soon::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:14px;
  background:repeating-linear-gradient(
    45deg, var(--black) 0 8px, var(--white) 8px 16px);
}
/* If the shop block is ever moved onto a white section, flip it back. */
.sec--white .shop__tile{ background:var(--black); color:var(--white); }
.sec--white .shop__tile--soon{ background:var(--white); color:var(--black); }
.shop__label{
  font-family:var(--font); font-weight:700;
  font-size:clamp(16px,1.5vw,23px);
  line-height:1.08; letter-spacing:.06em; text-transform:uppercase;
}
.shop__note{ font-weight:400; font-size:14px; }

/* ---- Contact: no boxes. Big type, hard space. ---- */
.contact{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:var(--gut) clamp(30px,5vw,80px); align-items:start;
}
@media (max-width: 860px){ .contact{ grid-template-columns:minmax(0,1fr); } }

.contact__list{ margin:0; padding:0; display:grid; gap:clamp(20px,2.6vw,32px); }
.contact__list dt{
  font-weight:500; font-size:11px;
  letter-spacing:.3em; text-transform:uppercase;
  margin-bottom:6px;
}
.contact__list dd{
  margin:0;
  font-family:var(--font); font-weight:700;
  font-size:clamp(14px,1.25vw,20px);
  line-height:1.3; letter-spacing:.06em; text-transform:uppercase;
}
.contact__list dd a{ text-decoration:none; }
.contact__list dd a:hover{ background:var(--white); color:var(--black); }

.contact__cta{ display:grid; gap:var(--rule-fat); }
.contact__micro{ margin:6px 0 0; font-weight:400; font-size:13px; }

/* ==========================================================================
   FOOTER — white slab, hard stop
   ========================================================================== */
.foot{ background:var(--white); color:var(--black); padding:clamp(34px,4vw,56px) 0; }
/* height:auto is load-bearing — the <img> carries height="138", and without
   this the constrained width squashes the lockup vertically. */
.foot__lockup{
  width:min(100%,560px); height:auto;
  margin:0 0 clamp(22px,2.6vw,32px);
}
.foot__inner{
  display:grid; gap:clamp(18px,2.4vw,30px);
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
}
.foot__col{ min-width:0; }
.foot__svc{
  margin:0 0 8px; max-width:46ch;
  font-weight:500; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; line-height:1.7;
}
.foot__place{
  margin:0;
  font-weight:700; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase;
}
.foot__links{ display:flex; flex-wrap:wrap; gap:8px 18px; }
.foot__links a{
  font-weight:700; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; padding:4px 6px;
}
.foot__links a:hover{ background:var(--black); color:var(--white); }
.foot__legal{
  grid-column:1 / -1; margin:0;
  padding-top:clamp(18px,2.2vw,26px);
  border-top:var(--rule-fat) solid var(--black);
  font-weight:500; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
}
@media (max-width: 760px){
  .foot__inner{ grid-template-columns:minmax(0,1fr); align-items:start; }
}