/* ==========================================================================
   Emperor Sign — layout replica of emperorsign.com
   Tokens read from the live site:
     dark #141316 | light #F7F7F7 | text #333333
     purple #8F61EB | blue #739FEC | pink #DF4276
     container 1280 | page pad 20 | btn radius 6 | big radius 30
   Display face on the original is scandia-web (Adobe Fonts, licensed).
   Archivo is substituted here at the same weight/tracking/case.
   ========================================================================== */

:root{
  --dark:#141316;
  --light:#f5f5f7;       /* page tint — white cards sit on this */
  --white:#fff;
  --text:#333;
  --purple:#8f61eb;
  --blue:#739fec;
  --pink:#df4276;
  /* The brand tints are set for large display type and graphics. Anything that
     carries 16px label text needs more weight behind it: white on --purple is
     4.14:1 and on --blue only 2.66:1, both short of AA. These are the same
     hues taken darker, used wherever text or an icon sits on the colour. */
  --purple-700:#7a45e0;   /* white text 5.6:1 */
  --blue-700:#3f6fd0;     /* white text 4.8:1 */
  --pink-700:#c62f63;     /* white text 5.3:1 */
  --grad:linear-gradient(90deg,#739fec 0%,#8f61eb 50%,#df4276 100%);
  /* neutrals were repeated as literals in both stylesheets — one name each */
  --muted:#6b6b74;        /* secondary text, 5.3:1 on white */
  --line:#e3e2e6;         /* form control borders */
  --hairline:rgba(20,19,22,.09);        /* card edges at rest */
  --hairline-strong:rgba(20,19,22,.18); /* card edges on hover/focus */

  /* three elevations, nothing in between:
     1 a card sitting on the page | 2 the same card raised | 3 floating UI */
  --shadow-1:0 1px 2px rgba(20,19,22,.04),0 2px 8px rgba(20,19,22,.04);
  --shadow-2:0 2px 6px rgba(20,19,22,.06),0 12px 28px rgba(20,19,22,.10);
  --shadow-3:0 8px 24px rgba(20,19,22,.25);
  --surface-dark:#1e1d22; /* the preview stage and dark placeholders */
  --danger:#a52350;       /* validation text, 7.1:1 on white */
  /* one focus treatment for the whole product */
  --ring:var(--purple-700);
  --ring-shadow:0 0 0 3px rgba(122,69,224,.45);
  --ring-on-dark:#fff;
  --container:1280px;
  --pad:20px;
  /* four radius roles, nothing in between:
     control 6 | card 12 | feature card and large media 20 | band 30 */
  --r-btn:6px;
  --r-card:12px;
  --r-media:20px;
  --r-sec:30px;
  --r-pill:100px;

  /* spacing scale - every gap, pad and margin below resolves to one of these */
  --s-1:4px;  --s-2:8px;   --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-8:32px;  --s-10:40px;--s-12:48px;--s-16:64px;
  --s-14:56px;--s-20:80px;--s-24:96px;

  --gutter:24px;              /* between cards sitting in a row */
  --gutter-lg:64px;           /* between the two halves of a split layout */
  --section-y:80px;           /* vertical padding of a section band */
  --section-y-tight:56px;
  --head-gap:48px;            /* section heading -> the content under it */
  --measure:620px;            /* prose: lands at ~70 characters a line */
  --measure-lg:730px;         /* two-column form fields, not prose */
  --lh-body:26px;
  --disp:'Archivo','Poppins',sans-serif;
  --body:'Poppins',sans-serif;

  /* type scale — four steps, so the hierarchy is legible at a glance:
     hero 60 > page title 48 > section title 40 > card title 20 */
  --fs-hero:60px;   --lh-hero:70px;
  --fs-h1:48px;     --lh-h1:56px;
  --fs-h2:40px;     --lh-h2:46px;
  --fs-h3:24px;     --lh-h3:30px;   /* feature-card titles */
  --fs-h4:20px;     --lh-h4:26px;   /* standard card titles */
}

*,*::before,*::after{box-sizing:border-box;}

/* ---------------- focus ----------------
   One visible, consistent ring everywhere, on the keyboard path only. Uses
   outline rather than box-shadow so it survives overflow:hidden and forced
   colours, and flips to white on the dark bands. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--ring);
  outline-offset:2px;
}
.hdr :focus-visible,.promo :focus-visible,.ftr :focus-visible,
.cta :focus-visible,.split :focus-visible,
.hiw :focus-visible,.phead :focus-visible{outline-color:var(--ring-on-dark);}

/* skip link — first stop for a keyboard or screen-reader user */
.skip{
  position:absolute;left:var(--pad);top:8px;z-index:100;
  transform:translateY(-200%);
  background:var(--white);color:var(--dark);
  padding:12px 20px;border-radius:var(--r-btn);
  font:500 15px var(--body);box-shadow:var(--shadow-3);
  transition:transform .2s ease;
}
.skip:focus{transform:translateY(0);}

/* A guard so no descendant can force the page wider than the screen.
   `clip` rather than `hidden`: hidden makes the root a scroll container, which
   silently kills position:sticky everywhere below it (it was stopping the
   configurator preview from pinning). Older engines fall back to hidden. */
html{overflow-x:hidden;overflow-x:clip;}
body{
  margin:0;
  font-family:var(--body);
  font-size:16px;
  line-height:1.5;
  color:var(--text);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;overflow-x:clip;
}

img{display:block;max-width:100%;}
/* every outline icon on the site is drawn at one weight; the markup carried
   1.6, 1.8 and 2 depending on when it was written */
svg{stroke-width:1.6;}
a{color:inherit;text-decoration:none;}

h1,h2,h3{
  font-family:var(--disp);
  font-weight:500;
  text-transform:uppercase;
  margin:0;
}
h1{font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:-.025em;color:var(--white);}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:-.02em;}
h3{font-size:var(--fs-h4);line-height:var(--lh-h4);letter-spacing:-.02em;text-transform:none;}
/* the homepage hero is the one place that outranks a page title */
.hero h1{font-size:var(--fs-hero);line-height:var(--lh-hero);letter-spacing:-.03em;}
p{margin:0;}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--pad);}
.section{padding-block:var(--section-y);}
.section--tight{padding-block:var(--section-y-tight);}
.section--flush-top{padding-top:0;}
/* consecutive bands of the same tone read as one band, so the seam between
   them carries one padding, not two */
.on-light + .on-light,.on-white + .on-white{padding-top:0;}

/* text meant only for screen readers: out of sight, still announced */
.u-visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------------- section head ----------------
   One component, two alignments: centred by default, split when the section
   carries actions. It owns the gap down to its content, so no grid below it
   has to set a margin of its own. */
.sec-head{text-align:center;margin-bottom:var(--head-gap);}
.sec-head p{max-width:var(--measure);margin:var(--s-4) auto 0;color:var(--text);line-height:var(--lh-body);}
.sec-head--split{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--gutter-lg);text-align:left;
}
.sec-head--split .sec-head__copy{flex:0 1 var(--measure);max-width:var(--measure);}
.sec-head--split h2{text-align:left;}
.sec-head--split p{margin-inline:0;}
.sec-head__actions{display:flex;gap:var(--s-3);flex-wrap:wrap;justify-content:flex-end;flex:0 1 auto;}
.on-light{background:var(--light);}
.on-white{background:var(--white);}

/* ---------------- buttons ---------------- */
/* Two variants, one shape: filled primary, outline secondary. Same padding,
   radius, type and metrics — the secondary is the primary with the fill
   removed, so the pair reads as one component at two weights.
   Two sizes only: 48px default, 52px for a page's primary action. */
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:16px 24px;
  font:500 16px/1 var(--body);
  border:0;border-radius:var(--r-btn);
  cursor:pointer;overflow:hidden;
  white-space:nowrap;
  transition:background .2s ease,box-shadow .2s ease,color .2s ease;
}
.btn span{position:relative;z-index:1;}
/* primary — white plate, dark label. The hairline keeps its edge where the
   surface behind it is also light. */
.btn--primary{
  background:var(--white);color:var(--dark);
  /* a little elevation so the plate still reads as a button where the surface
     behind it is also white */
  box-shadow:inset 0 0 0 1px rgba(20,19,22,.16),var(--shadow-1);
}
.btn--primary:hover{
  background:#f2f1f4;
  box-shadow:inset 0 0 0 1px rgba(20,19,22,.3),var(--shadow-2);
}

/* secondary — the same button, outline only */
.btn--secondary{
  background:transparent;color:var(--dark);
  box-shadow:inset 0 0 0 1px rgba(20,19,22,.28);
}
.btn--secondary:hover{
  background:rgba(20,19,22,.05);
  box-shadow:inset 0 0 0 1px rgba(20,19,22,.5);
}
/* on the dark bands the outline and its label take white ink */
.hdr .btn--secondary,.promo .btn--secondary,.hero .btn--secondary,
.hiw .btn--secondary,.split .btn--secondary,.cta .btn--secondary,
.phead .btn--secondary{
  color:var(--white);box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);
}
.hdr .btn--secondary:hover,.promo .btn--secondary:hover,.hero .btn--secondary:hover,
.hiw .btn--secondary:hover,.split .btn--secondary:hover,.cta .btn--secondary:hover,
.phead .btn--secondary:hover{
  background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);
}

/* circular arrow used on the material cards */
.circle-arrow{
  width:41px;height:40px;flex:none;border-radius:var(--r-pill);
  background:var(--light);color:var(--dark);
  display:grid;place-items:center;
  transition:background .25s ease,color .25s ease;
}
.circle-arrow svg{width:16px;height:16px;}

/* ---------------- promo bar ---------------- */
.promo{background:var(--blue-700);color:var(--white);}
.promo__in{
  min-height:56px;display:flex;align-items:center;justify-content:center;
  font-size:16px;text-align:center;
}

/* ---------------- header ---------------- */
.hdr{background:var(--dark);}
.hdr__in{
  min-height:90px;
  display:grid;grid-template-columns:70px 1fr auto;align-items:center;gap:24px;
}
.hdr__logo{width:70px;height:70px;object-fit:contain;display:block;}
.hdr__nav ul{
  list-style:none;margin:0;padding:0;
  /* sits with the logo rather than floating in the middle, so the header
     reads as brand+nav on the left and actions on the right */
  display:flex;align-items:center;justify-content:flex-start;gap:var(--s-6);
}
/* padding gives the link a 44px target without changing the header height;
   the current page is marked by weight and a rule, not by opacity alone */
.hdr__nav a{
  display:inline-block;padding:12px 2px;
  font-size:14px;color:rgba(255,255,255,.82);
  border-bottom:2px solid transparent;
  transition:color .2s ease,border-color .2s ease;
}
.hdr__nav a:hover{color:var(--white);}
.hdr__nav a[aria-current="page"]{color:var(--white);border-bottom-color:var(--purple);}
.hdr__right{display:flex;align-items:center;gap:20px;}
/* call and WhatsApp are the same control, one filled glyph and one stroked */
.hdr__phone,.hdr__wa{display:flex;align-items:center;gap:8px;color:var(--white);font-size:14px;}
.hdr__phone .ico,.hdr__wa .ico{
  width:38px;height:38px;border-radius:var(--r-pill);flex:none;
  border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;
  transition:background .2s ease,border-color .2s ease;
}
.hdr__phone svg,.hdr__wa svg{width:16px;height:16px;}
.hdr__phone:hover .ico,.hdr__wa:hover .ico{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4);}
.burger{
  display:none;width:44px;height:38px;background:transparent;
  border:0;cursor:pointer;padding:0;
}
.burger span{display:block;width:24px;height:2px;background:#fff;margin:5px auto;transition:.25s;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------------- hero ---------------- */
.hero{position:relative;background:var(--dark);overflow:hidden;}
.hero__glow{
  position:absolute;width:700px;height:700px;border-radius:50%;
  left:-220px;top:-160px;pointer-events:none;
  background:radial-gradient(circle,rgba(143,97,235,.20) 0%,rgba(115,159,236,.07) 45%,transparent 70%);
}
.hero__in{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:20px;
  min-height:640px;
}
/* Copy column is narrower than the media so the collage carries the section. */
.hero__copy{flex:0 0 560px;max-width:560px;display:flex;flex-direction:column;gap:32px;align-items:flex-start;}
.hero__copy p{max-width:470px;color:rgba(255,255,255,.72);font-size:16px;line-height:var(--lh-body);}
/* Column 1 is home work, column 2 business work, each tile shown whole at
   its own height and duplicated by JS for the loop. The marquee shifts by
   half the content, so the window must stay shorter than one set — build
   the hero and the check in scratchpad/hero.py reports the margin. */
.hero__media{
  flex:0 0 660px;max-width:660px;aspect-ratio:5/4;overflow:hidden;
  /* soften the crop so the columns read as continuous rather than cut off */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
}
.hero__cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;height:100%;
  /* each column is only as tall as its own photos: stretching the shorter
     one would leave slack that the -50% shift reads as a gap */
  align-items:start;}
.hero__col{display:flex;flex-direction:column;animation:heroScroll 40s linear infinite;}
/* negative delay offsets the second column's phase, so the two sides never
   line up into rows — the stagger costs no layout height, unlike a margin */
.hero__col--b{animation-direction:reverse;animation-delay:-13s;}
@keyframes heroScroll{from{transform:translateY(0);}to{transform:translateY(-50%);}}
.hero__col .ph{border-radius:var(--r-card);height:auto;margin-bottom:16px;}
/* the tile takes its height from the photograph rather than cropping it */
.hero__col .ph img{position:static;width:100%;height:auto;}

/* feature marquee under the hero */
.strip{background:var(--dark);border-top:1px solid rgba(255,255,255,.06);overflow:hidden;}
.strip__track{
  display:flex;gap:var(--s-14);width:max-content;padding:var(--s-8) 0;
  animation:stripMove 28s linear infinite;
}
.strip__track span{
  color:rgba(255,255,255,.85);font-size:16px;white-space:nowrap;
  display:flex;align-items:center;gap:var(--s-14);
}
/* centred on the line box, a dot lands above the optical centre of the
   caps beside it — a hair down puts it back on the visual midline */
.strip__track span::after{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--purple);
  transform:translateY(1px);
}
@keyframes stripMove{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------------- image placeholders ----------------
   Drop a real file into assets/img/ with the matching name and it takes over.
   Until then the box keeps its exact dimensions so layout is unaffected. */
.ph{
  position:relative;overflow:hidden;background:var(--line);
  background-image:
    linear-gradient(135deg,rgba(115,159,236,.22),rgba(143,97,235,.20) 50%,rgba(223,66,118,.18));
}
.ph--dark{background:#1e1d22;}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ph::after{
  content:attr(data-label);
  position:absolute;inset:0;display:grid;place-items:center;
  font:500 12px/1.4 var(--body);letter-spacing:.08em;text-transform:uppercase;
  color:rgba(20,19,22,.42);text-align:center;padding:12px;
}
.ph--dark::after{color:rgba(255,255,255,.35);}
.ph:has(img)::after{display:none;}

/* ---------------- choose your sign type ---------------- */
/* editorial cards: tag + arrow, then the title, then the image.
   Same white-card language as the testimonials, same circular arrow as the
   material cards, so the section sits inside the existing system. */
/* two 600px cards on a 1240px container read as oversized; holding the pair
   to 1040 keeps each card near 500 and lets the section breathe */
.types{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);
  max-width:1040px;margin-inline:auto;
}
.type{
  background:var(--white);border:1px solid var(--hairline);border-radius:var(--r-media);
  padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-5);
  box-shadow:var(--shadow-1);
  transition:border-color .25s ease,box-shadow .25s ease;
}
.type:hover{border-color:var(--hairline-strong);box-shadow:var(--shadow-2);}
.type__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);}
.type__tag{
  background:var(--light);color:var(--dark);
  padding:var(--s-2) var(--s-3);border-radius:var(--r-btn);
  font:600 12px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;
}
.type__title{
  font-family:var(--disp);font-size:var(--fs-h3);line-height:var(--lh-h3);
  letter-spacing:-.03em;color:var(--dark);text-transform:none;
}
/* Both photographs are 4:3, so the frame is 4:3 and neither is cropped. It
   was 10:7 — the minimax between a 2.22 panorama and a 0.92 near-square, which
   cost each of them 36%. Matching sources make that trade unnecessary. If a
   card's photo is swapped for one of a different shape, recompute:
   sqrt(ratio_a x ratio_b) is the frame that costs the pair the same. */
.type .ph{aspect-ratio:4/3;border-radius:var(--r-card);margin-top:auto;}
.type:hover .circle-arrow{background:var(--purple);color:var(--white);}

/* ---------------- how it works ---------------- */
.hiw{position:relative;background:var(--dark);border-radius:var(--r-sec);overflow:hidden;color:var(--white);}
.hiw__glow{position:absolute;width:600px;height:600px;border-radius:50%;pointer-events:none;}
.hiw__glow--a{right:-180px;top:-200px;background:radial-gradient(circle,rgba(115,159,236,.22),transparent 65%);}
.hiw__glow--b{left:-200px;bottom:-240px;background:radial-gradient(circle,rgba(223,66,118,.18),transparent 65%);}
.hiw__in{position:relative;z-index:1;padding-block:var(--section-y);}
.hiw__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter-lg);align-items:center;}
/* one photograph for the whole section, shown at its own proportions —
   the square frame was cropping 44% off this 16:9 shot */
.hiw__media .ph{height:auto;border-radius:var(--r-media);}
.hiw__media .ph img{position:static;width:100%;height:auto;}
.hiw__media .ph:empty{aspect-ratio:16/9;}

.step{border-bottom:1px solid rgba(255,255,255,.12);}
.step__head{
  width:100%;background:transparent;border:0;cursor:pointer;
  display:flex;align-items:center;gap:var(--s-4);
  padding:18px 0;text-align:left;color:var(--white);
}
/* the number leads the row: next to its step, not stranded at the far edge */
.step__num{
  flex:none;width:34px;height:34px;border-radius:var(--r-pill);
  display:grid;place-items:center;
  background:rgba(255,255,255,.10);color:rgba(255,255,255,.72);
  font:500 15px/1 var(--body);
  transition:background .25s ease,color .25s ease;
}
.step.is-open .step__num{background:var(--purple-700);color:var(--white);}
.step__title{flex:1;font-family:var(--disp);font-size:22px;letter-spacing:-.03em;}
/* an accordion needs to look like one */
.step__chev{
  flex:none;width:24px;height:24px;display:grid;place-items:center;
  color:rgba(255,255,255,.55);
  transition:transform .25s ease,color .25s ease;
}
.step__chev svg{width:16px;height:16px;}
.step.is-open .step__chev{transform:rotate(180deg);color:var(--white);}
.step__body{max-height:0;overflow:hidden;transition:max-height .35s ease,opacity .35s ease;opacity:0;}
.step.is-open .step__body{max-height:120px;opacity:1;}
.step__body p{padding-bottom:22px;color:rgba(255,255,255,.6);font-size:16px;}

/* ---------------- why choose us ----------------
   Four benefit cards in the same white-card language as the type and
   testimonial cards: one border, one radius, one hover. The icon tile reuses
   the light surface and the purple accent already used across the site. */
.why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter);}
.why__card{
  background:var(--white);border:1px solid var(--hairline);border-radius:var(--r-media);
  padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-4);
  box-shadow:var(--shadow-1);
  transition:border-color .25s ease,box-shadow .25s ease;
}
/* hover deepens the elevation rather than moving the card */
.why__card:hover{border-color:var(--hairline-strong);box-shadow:var(--shadow-2);}
.why__ico{
  width:52px;height:52px;flex:none;border-radius:var(--r-card);
  display:grid;place-items:center;
  background:var(--light);color:var(--purple-700);
  transition:background .25s ease,color .25s ease;
}
.why__ico svg{width:26px;height:26px;}
.why__card:hover .why__ico{background:var(--purple-700);color:var(--white);}
.why__card h3{
  font-family:var(--disp);font-size:20px;line-height:26px;letter-spacing:-.03em;
  text-transform:none;color:var(--dark);
}
.why__card p{font-size:16px;line-height:var(--lh-body);color:var(--text);}

/* ---------------- instagram reels ----------------
   Five embeds from @emperorsigns in a scroll rail. Each card is a cross-origin
   iframe, so Instagram's own player owns play, sound and full screen — the
   only thing we control is the rail they sit in. The frames are lazy, so five
   third-party players cost nothing until the section is actually reached. */
.reels{position:relative;}
.reels__rail{
  list-style:none;margin:0;padding:2px;
  display:flex;gap:var(--s-4);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:thin;
}
.reel{
  flex:0 0 320px;scroll-snap-align:start;
  background:var(--white);border:1px solid var(--hairline);border-radius:var(--r-media);
  overflow:hidden;box-shadow:var(--shadow-1);
}
/* the embed reports its own height; this is Instagram's own reel aspect plus
   the chrome it draws above and below the video */
.reel__frame{display:block;width:100%;height:640px;border:0;background:var(--light);}
.reels__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:40px;height:40px;border-radius:var(--r-pill);
  display:grid;place-items:center;cursor:pointer;
  background:var(--white);color:var(--dark);
  border:1px solid var(--hairline-strong);box-shadow:var(--shadow-2);
}
.reels__nav:hover{background:var(--light);}
.reels__nav svg{width:20px;height:20px;stroke-width:2;}
.reels__nav--prev{left:-14px;}
.reels__nav--next{right:-14px;}
.reels__nav[hidden]{display:none;}

/* ---------------- materials ----------------
   Same card shell as the benefit cards, with the photograph on top. */
/* Four across, one row. All four photographs are 16:9, so the frame is 16:9
   too: each is shown whole, at its own proportions, and the cards still come
   out the same height with their titles on one baseline. Matching the frame to
   the pictures is what makes "uncropped" and "equal cards" the same thing here.
   Equal columns, so the row stays even however long a material is named. */
.mats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter);}
.mat{
  display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--hairline);border-radius:var(--r-media);
  overflow:hidden;box-shadow:var(--shadow-1);
  transition:border-color .25s ease,box-shadow .25s ease;
}
.mat:hover{border-color:var(--hairline-strong);box-shadow:var(--shadow-2);}
/* One frame for all four, at one ratio, on every device, and every picture
   fills it — no bars, no gap between the photograph and the card edge.
   `cover` is what fills: three of the four are 16:9 and match the frame to
   within a tenth of a percent, so they are untouched; a picture of any other
   shape is cropped to fit rather than inset, centred so the sign stays in
   view. Swap in a 16:9 photograph and nothing is lost at all. */
.mat__media{aspect-ratio:16/9;height:auto;min-height:0;border-radius:0;}
.mat__media img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
}
/* one title line under the photograph — no chip, no description. 600 is the
   heaviest Archivo the page loads, so it is bold without a faux-bold render. */
.mat__body{padding:var(--s-4) var(--s-5);}
.mat__body h3{
  font-family:var(--disp);font-size:18px;line-height:24px;font-weight:600;
  letter-spacing:-.02em;text-transform:uppercase;color:var(--dark);
  /* a quarter-width card is narrower than STANDOFFS was at the old size, so
     let a word break rather than run past the card edge */
  overflow-wrap:break-word;
}

/* ---------------- promo split (20% off) ---------------- */
.split{position:relative;background:#000;overflow:hidden;color:var(--white);}
.split__glow{
  position:absolute;width:600px;height:600px;border-radius:50%;right:-200px;bottom:-260px;
  background:radial-gradient(circle,rgba(223,66,118,.24),transparent 65%);pointer-events:none;
}
.split__in{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:var(--gutter-lg);padding-block:var(--section-y);}
.split__copy{display:flex;flex-direction:column;gap:var(--s-6);align-items:flex-start;}
.split__copy h2{max-width:500px;color:var(--white);text-align:left;}
.split__copy p{color:rgba(255,255,255,.72);font-size:16px;line-height:var(--lh-body);}
/* 4/3 was cutting 20% off the width of this 1.67 photograph */
.split__media .ph{height:auto;border-radius:var(--r-media);}
.split__media .ph img{position:static;width:100%;height:auto;}
.split__media .ph:empty{aspect-ratio:16/9;}

/* ---------------- testimonials ---------------- */
/* card gap is deliberately tighter than --gutter: the cards sit in a moving
   band, so a smaller, equal gap in both axes keeps it reading as one unit */
/* the section head owns the gap down to its content, here as everywhere */
.tst__rows{display:flex;flex-direction:column;gap:var(--s-3);}
.tst__row{overflow:hidden;}
/* No flex gap: the loop shifts by exactly half the track, and a gap sits
   only BETWEEN children, which leaves half of one unaccounted for at the
   wrap. The spacing rides on the card instead so the two halves match. */
.tst__track{display:flex;width:max-content;animation:tstMove 60s linear infinite;}
.tst__track--rev{animation-direction:reverse;}
/* pause only the row being read, not the whole section; focus-within keeps
   it readable for keyboard and screen-reader users too */
.tst__row:focus-within .tst__track{animation-play-state:paused;}
/* hover-pause only where a pointer can actually hover — on a touchscreen the
   :hover state sticks after a tap and the row never restarts */
@media (hover:hover) and (pointer:fine){
  .tst__row:hover .tst__track{animation-play-state:paused;}
}
@keyframes tstMove{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* landscape cards — the extra width lets each quote reflow to ~4 lines, so
   the card broadens without getting taller (lands near 16:9) */
.tst__card{
  /* figure carries a UA margin of 1em 40px; the right margin is also the
     track's spacing, counted into every card so the loop halves evenly */
  margin:0 var(--s-3) 0 0;
  /* width + max-width rather than flex:0 0 min(): older Android Chrome and
     Samsung Internet drop a flex-basis holding min(), collapsing the card */
  flex:0 0 auto;width:520px;max-width:86vw;
  background:var(--white);border:1px solid var(--hairline);border-radius:var(--r-card);
  padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-4);
  box-shadow:var(--shadow-1);
}
.tst__stars{color:#c77700;letter-spacing:3px;font-size:14px;line-height:1;}
.tst__quote{margin:0;flex:1;font-size:16px;line-height:26px;color:var(--text);}
.tst__by{
  display:flex;align-items:center;gap:var(--s-3);
  padding-top:14px;border-top:1px solid rgba(20,19,22,.09);
}
.tst__avatar{
  flex:0 0 34px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--dark);color:var(--white);
  font-family:var(--disp);font-size:12px;line-height:1;
}
.tst__name{font-family:var(--disp);font-size:15px;letter-spacing:-.02em;color:var(--dark);}

/* ---------------- fast and flawless ---------------- */
.ff{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:var(--gutter-lg);}
.ff__copy{display:flex;flex-direction:column;gap:var(--s-6);align-items:flex-start;}
.ff__copy h2{text-align:left;}
.ff__copy p{color:var(--text);font-size:16px;line-height:var(--lh-body);}
/* The photograph sets the height, so nothing is ever cropped. This one is a
   1.79 landscape, which fills its half of the row at a height that sits level
   with the paragraph beside it — no cap needed. */
.ff__media .ph{
  height:auto;border-radius:var(--r-media);
}
.ff__media .ph img{position:static;width:100%;height:auto;}
.ff__media .ph:empty{aspect-ratio:16/9;}

/* ---------------- faq ---------------- */
.faq{max-width:var(--measure);margin-inline:auto;}
.faq h2{text-align:center;}
.faq__list{margin-top:0;}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;
  font-family:var(--disp);font-size:18px;letter-spacing:-.02em;color:var(--dark);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--dark);border-bottom:2px solid var(--dark);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s ease;
}
.faq details[open] summary::after{transform:translateY(-20%) rotate(225deg);}
.faq details p{padding:0 0 var(--s-6);color:var(--text);font-size:16px;line-height:var(--lh-body);}

/* ---------------- gallery ---------------- */
/* ---------------- gallery masonry ----------------
   The sixteen-photo gallery. Each photo keeps its own proportions instead of
   being cropped to a shared frame; columns rather than a grid, so it needs no
   script and never reflows once the intrinsic sizes are known. */
.gal{column-count:4;column-gap:var(--gutter);}
.gal .ph{
  break-inside:avoid;margin:0 0 var(--gutter);
  height:auto;border-radius:var(--r-card);
}
.gal .ph img{position:static;width:100%;height:auto;}
/* a photo that fails to load leaves an empty box — give it a shape to hold */
.gal .ph:empty{aspect-ratio:4/3;}
@media (max-width:1200px){ .gal{column-count:3;} }
@media (max-width:900px){  .gal{column-count:2;} }
@media (max-width:620px){
  .gal{column-gap:var(--s-3);}
  .gal .ph{margin-bottom:var(--s-3);}
}

/* ---------------- gallery board ----------------
   Two columns, one category each: Home on the left, Business on the right.
   Every pin is shown whole — full width of its column, natural height, no
   crop and no zoom — so the column heights follow the photographs rather
   than the other way round. */
.board{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter-lg);align-items:start;}
.board__head{margin-bottom:var(--s-6);}
.board__head h3{
  font-family:var(--disp);font-size:var(--fs-h3);line-height:var(--lh-h3);
  letter-spacing:-.03em;text-transform:uppercase;color:var(--dark);
}
/* two photographs across inside each category, masonry so each keeps its own
   height. Four image columns on a desktop, two once the categories narrow,
   one on a phone. */
.board__stack{column-count:2;column-gap:var(--s-4);}
.board__stack .ph{
  break-inside:avoid;margin:0 0 var(--s-4);
  height:auto;border-radius:var(--r-card);
}
.board__stack .ph img{position:static;width:100%;height:auto;}
.board__stack .ph:empty{aspect-ratio:4/3;}
/* the categories are narrow now, so one photograph across inside each */
@media (max-width:1000px){
  .board__stack{column-count:1;}
}
/* stacked, the two categories read as one section after the other */
@media (max-width:760px){
  .board{grid-template-columns:1fr;gap:var(--s-12);}
}

/* gallery clips — one row per band, same grid and card language as the
   photographs above them. Rendered only when the mp4 exists. */
.gal__subhead{
  margin-top:var(--s-10);margin-bottom:var(--s-5);
  font-family:var(--disp);font-size:var(--fs-h4);line-height:var(--lh-h4);
  letter-spacing:-.02em;text-transform:none;color:var(--dark);
}
.gvids{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter);}
.gvid{
  margin:0;background:var(--white);border:1px solid var(--hairline);
  border-radius:var(--r-media);overflow:hidden;box-shadow:var(--shadow-1);
  display:flex;flex-direction:column;
}
.gvid__media{width:100%;aspect-ratio:9/16;object-fit:cover;background:var(--surface-dark);display:block;}
.gvid figcaption{padding:var(--s-4) var(--s-5);font-size:15px;line-height:22px;color:var(--text);}

/* ---------------- closing cta ---------------- */
.cta{position:relative;background:var(--dark);overflow:hidden;text-align:center;color:var(--white);}
.cta__glow{position:absolute;width:600px;height:600px;border-radius:50%;pointer-events:none;}
.cta__glow--a{left:-160px;top:-260px;background:radial-gradient(circle,rgba(143,97,235,.26),transparent 65%);}
.cta__glow--b{right:-200px;bottom:-280px;background:radial-gradient(circle,rgba(223,66,118,.22),transparent 65%);}
.cta__in{position:relative;z-index:1;padding-block:var(--s-24);display:flex;flex-direction:column;align-items:center;gap:var(--s-6);}
.cta__in p{max-width:610px;color:rgba(255,255,255,.72);}
.cta__actions{display:flex;gap:var(--s-3);flex-wrap:wrap;justify-content:center;}

/* ---------------- breadcrumb ---------------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);
  font-size:14px;color:var(--muted);margin-bottom:var(--s-4);}
.crumbs a{display:inline-block;padding:4px 0;}
.crumbs a:hover{color:var(--dark);}
.crumbs span[aria-current]{color:var(--dark);}

/* ---------------- floating WhatsApp button ----------------
   Bottom-right on every page, above the content but below the mobile nav.
   The bubble is a deeper cut of the WhatsApp green: the brand #25D366 puts a
   white glyph at 1.98:1, short of the 3:1 an icon needs to be legible. This
   shade reads as the same green and clears it (3.3:1). */
.wafab{
  position:fixed;z-index:60;
  right:calc(20px + env(safe-area-inset-right));
  bottom:calc(20px + env(safe-area-inset-bottom));
  width:56px;height:56px;border-radius:var(--r-pill);
  display:grid;place-items:center;
  background:#16a34a;color:var(--white);
  box-shadow:var(--shadow-3);
  transition:background .2s ease,transform .2s ease,box-shadow .2s ease;
}
.wafab svg{width:30px;height:30px;}
.wafab:hover{background:#128b3f;transform:translateY(-2px);box-shadow:0 12px 30px rgba(20,19,22,.3);}
.wafab:active{transform:none;}
@media (max-width:620px){
  .wafab{
    width:52px;height:52px;
    right:calc(16px + env(safe-area-inset-right));
    bottom:calc(16px + env(safe-area-inset-bottom));
  }
  .wafab svg{width:27px;height:27px;}
}
@media (prefers-reduced-motion:reduce){
  .wafab:hover{transform:none;}
}

/* ---------------- page header (inner pages) ---------------- */
.phead{position:relative;background:var(--dark);color:var(--white);overflow:hidden;}
.phead__glow{
  position:absolute;width:600px;height:600px;border-radius:50%;right:-200px;top:-260px;
  background:radial-gradient(circle,rgba(143,97,235,.24),transparent 65%);pointer-events:none;
}
.phead__in{
  position:relative;z-index:1;padding-block:var(--section-y);
  display:flex;flex-direction:column;gap:var(--s-5);align-items:flex-start;
}
.phead p{max-width:var(--measure);color:rgba(255,255,255,.72);line-height:var(--lh-body);}
/* the breadcrumb belongs to the page header, on every inner page */
.phead .crumbs{margin-bottom:0;color:rgba(255,255,255,.65);}
.phead .crumbs a:hover{color:var(--white);}
.phead .crumbs span[aria-current]{color:var(--white);}

/* ---------------- footer ---------------- */
.ftr{background:var(--dark);color:rgba(255,255,255,.72);padding:var(--section-y) 0 var(--s-10);font-size:16px;}
.ftr__grid{display:grid;grid-template-columns:381fr 229fr 229fr 381fr;gap:var(--s-10);}
.ftr__logo{width:60px;height:54px;object-fit:contain;}
.ftr__brand p{margin-top:var(--s-6);max-width:229px;line-height:var(--lh-body);}
.ftr h3{
  font-family:var(--body);font-size:16px;font-weight:600;color:var(--white);
  text-transform:none;letter-spacing:0;margin-bottom:16px;
}
/* padding, not gap, so each link owns a 28px target rather than dead space */
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
.ftr ul a{display:inline-block;padding:5px 0;}
.ftr a:hover{color:var(--white);}
.ftr__contact{display:flex;flex-direction:column;gap:6px;}
.ftr__contact > a{display:inline-block;padding:5px 0;}
.ftr__social{display:flex;gap:12px;margin-top:8px;}
.ftr__social a{
  width:32px;height:32px;border-radius:var(--r-pill);display:grid;place-items:center;
  background:rgba(255,255,255,.08);color:#fff;transition:background .25s ease;
}
.ftr__social a:hover{background:var(--purple);}
.ftr__social svg{width:15px;height:15px;}
.ftr__bottom{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center;
  margin-top:var(--s-16);padding-top:var(--s-6);border-top:1px solid rgba(255,255,255,.1);
  font-size:14px;
}
.ftr__bottom a{display:inline-block;padding:5px 0;}
.ftr__bottom > :last-child{text-align:right;}

/* ---------------- inner page bits ---------------- */

.form{max-width:var(--measure-lg);margin-inline:auto;display:grid;gap:var(--s-4);grid-template-columns:1fr 1fr;}
.form .full{grid-column:1/-1;}
.form label{display:block;font-size:14px;font-weight:500;margin-bottom:8px;color:var(--dark);}
.form input,.form select,.form textarea{
  width:100%;padding:14px 16px;font:400 16px var(--body);color:var(--text);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-btn);
}
.form textarea{min-height:150px;resize:vertical;}
/* the border is the resting cue; the ring above is the keyboard cue, so the
   outline is never suppressed */
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--purple-700);}
.formnote{font-size:14px;color:var(--muted);margin-top:var(--s-3);}
.ok{
  grid-column:1/-1;display:flex;gap:var(--s-3);align-items:flex-start;
  padding:16px;border-radius:var(--r-btn);
  background:rgba(63,111,208,.06);border:1px solid rgba(63,111,208,.28);
  color:#28457f;font-size:14px;
  line-height:22px;
}
.ok::before{content:"✓";font-weight:600;line-height:22px;}

/* ---------------- responsive ---------------- */
@media (max-width:1100px){
  :root{--fs-hero:48px;--lh-hero:56px;--fs-h1:40px;--lh-h1:46px;--fs-h2:34px;--lh-h2:40px;}
  .hero__in{flex-direction:column;min-height:0;padding-block:60px;gap:48px;}
  .hero__copy,.hero__media{flex:1 1 auto;max-width:100%;width:100%;}
  .hero__media{max-height:520px;}
  .hiw__grid{grid-template-columns:1fr;gap:var(--s-10);}
  .hiw__in{padding-block:var(--section-y-tight);}
  .why{grid-template-columns:repeat(2,minmax(0,1fr));}
  .mats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .gvids{grid-template-columns:repeat(2,minmax(0,1fr));}
  .split__in,.ff{grid-template-columns:1fr;align-items:start;gap:var(--s-10);}
  .ftr__grid{grid-template-columns:1fr 1fr;}
  .tst__card{width:500px;max-width:88vw;}
}
@media (max-width:900px){
  .hdr__in{grid-template-columns:70px 1fr auto;}
  .hdr__in{grid-template-columns:70px 1fr;}
  .hdr__right{justify-content:flex-end;}
  .hdr__nav{
    position:absolute;left:0;right:0;top:100%;z-index:50;
    background:var(--dark);border-top:1px solid rgba(255,255,255,.08);
    display:none;
  }
  .hdr__nav.is-open{display:block;}
  .hdr__nav ul{flex-direction:column;align-items:stretch;gap:0;padding:8px var(--pad) 20px;}
  .hdr__nav li{border-bottom:1px solid rgba(255,255,255,.07);}
  .hdr__nav a{display:block;padding:14px 0;font-size:15px;}
  .hdr{position:relative;}
  .burger{display:block;}
  .hdr__right .btn,.hdr__phone span:not(.ico),.hdr__wa span:not(.ico){display:none;}
  .hdr__right{gap:var(--s-3);}
  /* stacked, a flex-basis would be read as a HEIGHT — reset it */
  .sec-head--split{flex-direction:column;}
  .sec-head--split .sec-head__copy{flex:0 0 auto;max-width:100%;}
  .sec-head__actions{justify-content:flex-start;}
  /* stacked, two buttons of different widths read as an accident; matching
     the card width below makes them look placed */
  .sec-head__actions{width:100%;}
  .sec-head__actions .btn{flex:1 1 auto;justify-content:center;}
  .form{grid-template-columns:1fr;}
}
@media (max-width:620px){
  :root{--fs-hero:36px;--lh-hero:42px;--fs-h1:32px;--lh-h1:38px;--fs-h2:28px;--lh-h2:33px;
        --section-y:56px;--head-gap:32px;--gutter-lg:40px;}
  .why{grid-template-columns:1fr;}
  /* two across on a phone, like the gallery — the gap is deliberately left
     alone, so a card only ever gets smaller as the screen does */
  /* the card is ~150px wide here: less padding buys text width back, and the
     title steps down so the longest word still fits on one line */
  .mat__body{padding:var(--s-3) var(--s-3) var(--s-4);}
  .mat__body h3{font-size:15px;line-height:20px;letter-spacing:-.02em;}
  .types{grid-template-columns:1fr;}
  .gvids{grid-template-columns:1fr;}
  /* one reel at a time on a phone, still swipeable */
  .reel{flex-basis:min(320px,86vw);}
  .reels__nav{display:none;}
  .ftr__grid{grid-template-columns:1fr;}
  .ftr__bottom{grid-template-columns:1fr;}
  .ftr__bottom > :last-child{text-align:left;}
  /* a phone-width card can't be landscape and still hold a full quote, so
     tighten the type and chrome instead of cropping anyone's words */
  .type{padding:var(--s-5);gap:var(--s-4);}
  .tst{padding:44px 0;}
  .tst__card{padding:18px 20px;width:360px;max-width:90vw;gap:12px;border-radius:12px;margin-right:var(--s-2);}
  .tst__quote{font-size:14px;line-height:22px;}
  .tst__by{padding-top:12px;}
  .tst__avatar{flex:0 0 30px;width:30px;height:30px;font-size:11px;}
  .tst__name{font-size:14px;}
  .tst__rows{gap:var(--s-2);}
  .hiw__in{padding-block:40px;}
  .cta__in{padding:70px 0;}
}

@media (prefers-reduced-motion:reduce){
  .hero__col,.strip__track,.tst__track{animation:none;}
  /* no animation to carry the offset, so stagger the column statically */
  .hero__col--b{transform:translateY(-11%);}
  /* without the scroll the overflow would hide most cards, so lay the rows
     out as a static wrapped grid and drop the duplicates the loop added */
  .tst__row{overflow:visible;}
  .tst__track{width:auto;flex-wrap:wrap;justify-content:center;row-gap:var(--s-3);}
  .tst__track > [aria-hidden="true"]{display:none;}
  /* the card lifts and image zooms carry no meaning — drop the movement but
     keep the colour/border feedback */
  .why__card:hover,.mat:hover,.type:hover{transform:none;}
  *{transition-duration:.01ms !important;}
}