/* ===============================================================
   ARGH — argh.team

   COLOR SCHEME
   Two complete themes live below. Switch by changing one attribute
   on <html> in index.html and 404.html:

       <html lang="en" data-theme="cream">     <- current
       <html lang="en" data-theme="electric">  <- previous

   "cream"    ivory #FBF2CD + gold #DCAD76   (current design)
   "electric" white #FFFFFF  + red  #FF004D  (original design)

   Nothing outside the two blocks hardcodes a brand or text colour,
   so the swap is complete — including the logo, which is inlined
   as SVG using currentColor.
   =============================================================== */

/* ---- THEME: cream (current) ---------------------------------- */
:root,
[data-theme="cream"]{
  --page-bg:#FBF2CD;          /* frame around the dark card       */
  --on-dark:#FBF2CD;          /* text + logo on the card          */
  --on-dark-82:rgba(251,242,205,.82);
  --on-dark-72:rgba(251,242,205,.72);
  --on-dark-55:rgba(251,242,205,.55);

  --brand:#DCAD76;
  --brand-hover:#CD9A5E;
  --brand-active:#BD8A4E;
  --brand-glow:rgba(220,173,118,.35);
  --text-on-brand:#0A0A0A;    /* dark type on the gold button     */
  --shadow-brand:0 12px 32px rgba(220,173,118,.35);
}

/* Phones get a deeper ivory frame — the pale one washed out against a small
   bright screen. Only the surround changes: --on-dark (type and logo on the
   card) stays put, so the card itself is identical to every other device.
   Excludes the electric theme, whose frame is white by design.
   data-phone is set in <head> from the screen's short edge, so it is stable
   across rotation and applies before first paint. */
[data-phone="true"]:not([data-theme="electric"]){
  --page-bg:#EAD7AC;
}

/* ---- THEME: electric (previous) ------------------------------ */
[data-theme="electric"]{
  --page-bg:#FFFFFF;
  --on-dark:#FFFFFF;
  --on-dark-82:rgba(255,255,255,.82);
  --on-dark-72:rgba(255,255,255,.72);
  --on-dark-55:rgba(255,255,255,.55);

  --brand:#FF004D;
  --brand-hover:#E60045;
  --brand-active:#CC003D;
  --brand-glow:rgba(255,0,77,.35);
  --text-on-brand:#FFFFFF;
  --shadow-brand:0 12px 32px -8px rgba(255,0,77,.35);
}

/* ---- CANVAS PALETTE -------------------------------------------
   The animated field, independent of the colour theme above.
   Read by app.js at startup and fed to the shader, so the field is
   retuned here rather than in JS. Switch on <html>:

       <html data-canvas="ember">     <- current
       <html data-canvas="electric">  <- previous

   c0 is the base/background; c1-c4 are the drifting colours.
---------------------------------------------------------------- */
:root,
[data-canvas="ember"]{
  --field-c0:#1A0008;   /* deep ember base   */
  --field-c1:#FF004D;
  --field-c2:#FF7A00;
  --field-c3:#FF4D80;
  --field-c4:#00D6C8;
}

[data-canvas="electric"]{
  --field-c0:#0A0A0A;
  --field-c1:#8A3CFF;
  --field-c2:#2D5BFF;
  --field-c3:#FF004D;
  --field-c4:#00D6C8;
}

:root{ --card-bg:#0A0A0A; }

/* ---- Design-system tokens (colour-independent) ---------------- */
:root{
  --font-display:"Archivo","Archivo Black",Impact,sans-serif;
  --font-body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --text-xs:14px;--text-sm:16px;--text-base:18px;--text-lg:22px;--text-xl:28px;
  --text-2xl:36px;--text-3xl:48px;--text-4xl:64px;--text-5xl:88px;--text-6xl:120px;
  --leading-tight:.95;--leading-snug:1.1;--leading-normal:1.5;--leading-relaxed:1.65;
  --tracking-display:-.03em;--tracking-tight:-.01em;--tracking-label:.08em;
  --weight-body:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;
  --weight-display:800;--weight-black:900;--wdth-display:112;

  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;
  --space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;--space-11:160px;
  --control-h-sm:40px;--control-h-md:52px;--control-h-lg:64px;
  --control-px-sm:16px;--control-px-md:24px;--control-px-lg:32px;

  --radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;
  --radius-xl:24px;--radius-2xl:32px;
  --shadow-focus:0 0 0 4px var(--brand-glow);
  --ease-out:cubic-bezier(.2,.8,.2,1);--ease-snap:cubic-bezier(.6,0,.2,1);
  --dur-fast:120ms;--dur-base:220ms;--dur-slow:480ms;
}

/* ---------------------------------------------------------------
   Base
---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{font-size:var(--text-base)}
html,body{margin:0;height:100%;background:var(--page-bg)}
body{
  color:var(--on-dark);font-family:var(--font-body);font-size:var(--text-base);
  line-height:var(--leading-normal);-webkit-font-smoothing:antialiased;text-wrap:pretty;
}
a{color:var(--on-dark);text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--brand);text-decoration:underline;text-underline-offset:.2em}
img,svg{max-width:100%}
::selection{background:var(--brand);color:var(--text-on-brand)}
:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

/* ---------------------------------------------------------------
   Layout — cream frame, dark card inside
---------------------------------------------------------------- */
.page{
  height:100dvh;min-height:100dvh;padding:16px;
  background:var(--page-bg);color:var(--on-dark);overflow:hidden;
}
.hero{
  position:relative;height:100%;min-height:calc(100dvh - 32px);
  overflow:hidden;--card-radius:32px;border-radius:var(--card-radius);background:var(--card-bg);isolation:isolate;
  display:grid;grid-template-rows:auto 1fr auto;
  padding:clamp(20px,min(4vw,5vh),56px);
}

.field{position:absolute;inset:0;overflow:hidden;border-radius:inherit;z-index:0;background:var(--field-c0);
  /* Firefox will not clip a composited child (the canvas) to overflow:hidden +
     border-radius, so the grain bled past the rounded corners. clip-path does
     clip composited layers; the radius tracks --card-radius per breakpoint. */
  clip-path:inset(0 round var(--card-radius))}
.field canvas{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:inherit}
.field .veil{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,10,.2) 0%,rgba(10,10,10,0) 30%,rgba(10,10,10,0) 55%,rgba(10,10,10,.55) 100%);
}

/* Touch devices: the light rests near the top and the lower half carries
   stacked text, so widen the range between the lit and shaded zones —
   hold clear through the spotlight, then ramp deeper than desktop. */
@media (hover:none){
  .field .veil{
    background:linear-gradient(180deg,
      rgba(10,10,10,.18) 0%,
      rgba(10,10,10,0)   20%,
      rgba(10,10,10,.10) 44%,
      rgba(10,10,10,.46) 70%,
      rgba(10,10,10,.78) 88%,
      rgba(10,10,10,.93) 100%);
  }
}

.row{position:relative;z-index:1}

/* top row — logo + contact */
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:32px}
.logo{height:clamp(56px,min(11vw,16vh),168px);width:auto;display:block;color:var(--on-dark)}
.top-contact{
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  font-size:16px;font-weight:var(--weight-medium);text-align:right;
}
.contact-row{display:flex;align-items:center;gap:12px}

/* Social icon — inherits the theme through currentColor, so it follows a
   theme swap with everything else. */
.icon-link{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;flex:none;color:var(--on-dark);
  transition:color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);
}
.icon-link svg{width:100%;height:100%;fill:currentColor;display:block}
.icon-link:hover{color:var(--brand);transform:translateY(-1px);text-decoration:none}

/* Touch: keep the glyph small but give it a real tap target (~40px). */
@media (hover:none){
  .icon-link{padding:10px;margin:-10px;box-sizing:content-box}
}

/* middle — headline */
.mid{
  display:grid;align-content:center;gap:clamp(12px,2.5vh,36px);
  max-width:1100px;min-height:0;padding:12px 0;
}
.eyebrow{
  font-size:16px;font-weight:var(--weight-medium);color:var(--on-dark-72);
  display:flex;align-items:center;gap:12px;
}
.dot{
  width:8px;height:8px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 16px var(--brand);display:inline-block;flex:none;
}
h1{
  font-family:var(--font-display);font-weight:var(--weight-black);
  font-variation-settings:'wdth' 112;letter-spacing:var(--tracking-display);
  line-height:.92;font-size:clamp(36px,min(7.5vw,13vh),112px);
  color:var(--on-dark);margin:0;max-width:12ch;
}
h1 .accent{color:var(--brand)}
.lede{
  margin:0;font-size:clamp(16px,min(1.6vw,2.6vh),22px);line-height:1.45;
  max-width:34ch;color:var(--on-dark-82);
}

/* bottom — CTA + capabilities */
.bottom{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px 32px;flex-wrap:wrap;
}
.cta-wrap{display:inline-block;border-radius:12px;box-shadow:var(--shadow-brand)}
.meta{
  display:flex;flex-direction:row;gap:12px 32px;flex-wrap:wrap;
  align-items:center;justify-content:flex-end;
  font-size:16px;font-weight:var(--weight-medium);color:var(--on-dark-55);
}
.meta-list{display:flex;gap:12px 24px;flex-wrap:wrap}
.bottom-contact{display:none}

/* ---------------------------------------------------------------
   Button — ArghDesignSystem.Button variant="primary" size="lg"
---------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  height:var(--control-h-lg);padding:0 var(--control-px-lg);
  font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--text-lg);
  line-height:1;border-radius:var(--radius-md);border:2px solid transparent;
  background:var(--brand);color:var(--text-on-brand);
  cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover{background:var(--brand-hover);color:var(--text-on-brand);text-decoration:none;transform:translateY(-1px)}
.btn:active{background:var(--brand-active);transform:scale(.98)}

/* ---------------------------------------------------------------
   Entrance animation — hidden only when JS will animate, so a
   no-JS visitor still gets a complete page.
---------------------------------------------------------------- */
.js [data-hero]{opacity:0;transform:translateY(24px)}
.js [data-hero].in{
  opacity:1;transform:none;
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);
}

/* ---------------------------------------------------------------
   Tablet — 640px to 1024px
---------------------------------------------------------------- */
@media (min-width:641px) and (max-width:1024px){
  .hero{--card-radius:28px;padding:clamp(20px,min(4.5vw,5vh),40px)}
  .logo{height:clamp(56px,min(13vw,12vh),128px)}
  h1{font-size:clamp(36px,min(9.5vw,11vh),88px)}
  .lede{font-size:clamp(16px,min(2.4vw,2.6vh),21px)}
  .mid{gap:clamp(10px,2.5vh,28px)}
}

/* ---------------------------------------------------------------
   Mobile — up to 640px
---------------------------------------------------------------- */
@media (max-width:640px){
  .page{height:auto;min-height:100dvh;overflow:visible;padding:8px}
  .hero{height:auto;min-height:calc(100dvh - 16px);--card-radius:20px;padding:24px 20px 20px}
  .logo{height:clamp(72px,22vw,104px)}
  h1{font-size:clamp(42px,13vw,60px)}
  .lede{font-size:18px}
  .mid{gap:20px;padding:40px 0}
  .top-contact{display:none}
  .eyebrow{align-items:flex-start}
  .dot{margin-top:.45em}
  /* column-reverse puts the CTA last on screen, at thumb reach */
  .bottom{flex-direction:column-reverse;align-items:stretch}
  .meta{flex-direction:column;align-items:flex-start;justify-content:flex-start}
  .bottom-contact{display:flex;align-items:center;gap:14px;color:var(--on-dark);font-size:18px}
  /* 22px glyph in a ~42px tap target. Keyed to width, not hover, so it is
     guaranteed on phones regardless of what the UA reports for hover. */
  .bottom-contact .icon-link{width:22px;height:22px;padding:10px;margin:-10px;box-sizing:content-box}
  .cta-wrap{display:block}
  .btn{width:100%}
}

/* ---------------------------------------------------------------
   Short viewports — phone landscape, split screen, small windows.
   Too wide for the mobile block, too short for the full-height
   desktop card, which otherwise crushed and clipped its content.
   Keep a workable card height and let the page scroll.
   Must stay after the mobile block so it wins when both match.
---------------------------------------------------------------- */
@media (max-height:600px){
  .page{height:auto;min-height:100dvh;overflow:visible;padding:8px}
  .hero{height:auto;min-height:max(540px,calc(100dvh - 16px));--card-radius:20px;
        padding:clamp(18px,3.2vw,32px)}
  .logo{height:clamp(44px,6.5vw,72px)}
  h1{font-size:clamp(30px,5vw,52px)}
  .lede{font-size:clamp(15px,1.5vw,18px);max-width:46ch}
  .mid{gap:clamp(10px,1.6vh,20px);padding:clamp(12px,2vh,24px) 0}
  .top{gap:20px}
}

@media (max-height:430px) and (max-width:780px){
  .bottom{flex-direction:column-reverse;align-items:stretch;gap:14px}
  .meta{align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  .js [data-hero]{opacity:1;transform:none;transition:none}
  .btn{transition:none}
  .btn:hover,.btn:active{transform:none}
}