/* =========================================================
   anywr brand hub
   Fonts load from Google Fonts (see index.html).
   ========================================================= */

   :root{
    --cream:#F5EEDF;
    --peri:#C8D6F8;
    --green:#A8DC80;
    --lightgreen:#DDE3C6;
    --coral:#F8785C;
    --violet:#9E00F0;
    --navy:#1C2340;
    --white:#FFFFFF;
    --lilac:#F0E4FB;
    --placeholder:#E6E0D2;
    --offwhite:#F1F2F5;
    --r-panel:32px;
    --r-card:28px;
    --pad:clamp(20px,5.5vw,80px);
    --max:1280px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;scroll-padding-top:110px}
  body{font-family:"Poppins",system-ui,sans-serif;font-weight:400;font-size:17px;line-height:1.55;letter-spacing:-0.05em;color:var(--navy);background:var(--cream);position:relative;overflow-x:hidden}
  a{color:inherit}
  :focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:8px}
  h1,h2,h3,h4{font-weight:600;line-height:1.05;letter-spacing:-0.05em}
  p{max-width:62ch}
  
  /* ribbon: one path, page root, behind everything */
  #ribbon{position:absolute;top:0;left:0;width:100%;z-index:0;pointer-events:none;overflow:visible}
  #ribbon path{fill:none;stroke:var(--green);stroke-linecap:round;stroke-linejoin:round}
  
  .wrap{position:relative;z-index:1;max-width:calc(var(--max) + 2*var(--pad));margin:0 auto;padding:0 var(--pad)}
  
  
  /* =========================================================
     PANELS
     Each part of the system is its own screen. They are sticky,
     so each one rides up over the one before it. Later panels
     paint over earlier ones by DOM order, so no z-index needed.
     ========================================================= */
  
  .panel{
    position:sticky;
    top:0;
    min-height:100svh;
    background:var(--cream);
    border-radius:var(--r-panel) var(--r-panel) 0 0;
    display:grid;
    align-items:center;
    padding:clamp(72px,9vh,120px) 0 clamp(40px,6vh,80px);
  
    /* the shadow sits above the top edge, so you see each panel
       lift over the one before it as it slides up */
    box-shadow:0 -18px 50px rgba(28,35,64,.13);
  }
  
  /* alternating ground, so two panels never meet in the same colour */
  .panel:nth-of-type(even){background:var(--offwhite)}
  
  .panel-hero{border-radius:0;padding-top:0;box-shadow:none}
  .panel-inner{width:100%;position:relative;z-index:2}
  .panel .section{padding:0}
  .panel .section-head{margin-bottom:clamp(20px,3vh,40px)}
  .panel .section-head h2{font-size:clamp(40px,6vw,88px)}
  .panel .detail{padding:0}
  
  /* The master path is measured, never painted: it is collapsed to
     nothing so the browser has no full-page SVG to rasterise. */
  #ribbon{position:absolute;top:0;left:0;width:0;height:0;overflow:hidden;pointer-events:none}
  
  /* the ribbon copy, clipped to its own panel */
  .ribbon-clip{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
    border-radius:inherit;
  }
  /* Sized to its own panel, not to the document. The viewBox pans
     over the shared path instead, which keeps the clipped area one
     screen rather than the whole page. */
  .ribbon-layer{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;
  }
  .ribbon-layer path{
    fill:none;
    stroke:var(--green);
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  
  /* nav */
  .nav{position:sticky;top:0;z-index:20;padding:20px 0 14px}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
  .wordmark{display:inline-flex;align-items:center;line-height:0}
  .wordmark img{height:28px;width:auto;display:block}
  .pillnav{display:flex;gap:4px;background:var(--white);border-radius:999px;padding:8px;box-shadow:0 8px 30px rgba(28,35,64,.08)}
  .pillnav a,.pillnav span{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:999px;font-size:16px;text-decoration:none;white-space:nowrap}
  .pillnav a[aria-current="true"]{background:var(--lilac)}
  .pillnav .locked{opacity:.45;cursor:not-allowed}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:12px 24px;font:600 16px/1.2 "Poppins",system-ui,sans-serif;text-decoration:none;cursor:pointer;white-space:nowrap}
  .btn-violet{background:var(--violet);color:var(--white)}
  .btn-navy{background:var(--navy);color:var(--white)}
  .btn-ghost{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}
  .nav .btn{justify-self:end}
  .logout-btn{background:transparent;border:1px solid rgba(28,35,64,0.15);border-radius:999px;padding:7px 16px;font:500 13px/1 "Poppins",system-ui,sans-serif;color:var(--navy);cursor:pointer;opacity:0.6;transition:opacity 0.2s}
  .logout-btn:hover{opacity:1}
  
  /* hero */
  .hero{background:var(--peri);border-radius:var(--r-panel);padding:clamp(32px,7vw,112px) clamp(24px,6vw,96px) clamp(32px,5vw,72px);min-height:min(78vh,760px);display:flex;flex-direction:column;justify-content:space-between;gap:48px}
  .hero h1{font-size:clamp(38px,5.6vw,78px);max-width:17ch}
  .hero-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px}
  .hero-foot p{font-size:clamp(17px,1.5vw,20px);max-width:44ch}
  .legend{display:flex;flex-wrap:wrap;gap:10px}
  
  .src{display:inline-flex;align-items:center;gap:8px;font-size:14px;line-height:1;padding:8px 14px;border-radius:999px;white-space:nowrap}
  .src::before{content:"";width:8px;height:8px;border-radius:50%}
  .src-site{background:var(--navy);color:var(--white)}
  .src-site::before{background:var(--green)}
  .src-draft{background:transparent;color:var(--navy);border:1.5px dashed var(--navy);padding:6.5px 12.5px}
  .src-draft::before{background:var(--coral)}
  .src-open{background:var(--white);color:var(--navy)}
  .src-open::before{background:var(--violet)}
  
  /* sections */
  .section{padding:0}
  .section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 64px;align-items:end;margin-bottom:clamp(40px,6vw,80px)}
  .section-head h2{font-size:clamp(48px,8vw,120px)}
  .section-head p{font-size:clamp(17px,1.5vw,20px)}
  
  /* brand ladder */
  .ladder{list-style:none;counter-reset:step}
  .ladder li{display:grid;grid-template-columns:72px minmax(0,4fr) minmax(0,6fr) minmax(0,3fr);gap:16px 40px;padding:clamp(18px,2.2vh,30px) 0}
  .step-no{font-weight:600;font-size:20px;line-height:1.3}
  .ladder h3{font-size:clamp(22px,2.1vw,30px)}
  .ladder .earns{font-size:15px;margin-top:10px;opacity:.75}
  .ladder .body{font-size:clamp(15px,1.3vw,18px);line-height:1.45}
  .ladder .meta{justify-self:end;align-self:start}
  .moves{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
  .moves li{all:unset;display:inline-block;background:var(--white);border-radius:999px;padding:6px 14px;font-weight:600;font-size:14px}
  .moves li:last-child{background:var(--navy);color:var(--white)}
  
  /* direction index */
  .tiles{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
  .tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:min(240px,22vh);border-radius:var(--r-card);padding:24px;text-decoration:none;overflow:hidden;transition:transform .25s ease}
  .tile:hover{transform:translateY(-4px)}
  .tile-name{font-weight:600;font-size:22px;line-height:1.1}
  .tile-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;position:relative;z-index:1}
  .t-ribbon{grid-column:span 6;grid-row:span 2;background:var(--navy);color:var(--white);min-height:min(496px,46vh)}
  .t-ribbon svg{position:absolute;inset:0;width:100%;height:100%}
  .t-colour{grid-column:span 3;background:var(--white)}
  .t-type{grid-column:span 3;background:var(--peri)}
  .t-logo{grid-column:span 3;background:var(--violet);color:var(--white)}
  .t-shape{grid-column:span 3;background:var(--white)}
  .t-motion{grid-column:span 4;background:var(--coral)}
  .t-voice{grid-column:span 4;background:var(--green)}
  .t-imagery{grid-column:span 4;background:var(--placeholder)}
  .strips{display:flex;height:96px;border-radius:16px;overflow:hidden}
  .strips span{flex:1}
  .aa{font-weight:600;font-size:96px;line-height:.9}
  .t-logo .aa{font-size:clamp(40px,4vw,56px)}
  .shape-mini{display:flex;gap:10px;align-items:flex-end}
  .shape-mini span{background:var(--peri);display:block}
  .mini-card{width:120px;height:84px;background:var(--white);border-radius:14px;transform:perspective(400px) rotateX(38deg);transform-origin:bottom;box-shadow:0 12px 30px rgba(28,35,64,.18)}
  .voice-mini{font-weight:600;font-size:40px;line-height:1}
  
  /* detail blocks */
  .detail{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:32px 64px}
  .detail-aside h3{font-size:clamp(30px,3.2vw,44px);margin-bottom:16px}
  .detail-aside p{font-size:16px;margin-bottom:16px}
  .detail-aside .src{margin-top:4px}
  .rules{list-style:none;display:grid;gap:12px;margin-top:8px}
  .rules li{background:var(--white);border-radius:20px;padding:18px 22px;font-size:17px}
  .rules strong{font-weight:600}
  
  .swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .swatch{border-radius:20px;overflow:hidden;background:var(--white)}
  .swatch-chip{height:110px}
  .swatch-info{padding:12px 14px 14px;font-size:14px;line-height:1.35}
  .swatch-info b{display:block;font-weight:600;font-size:16px}
  .contrast{margin-top:32px;background:var(--white);border-radius:var(--r-card);padding:8px 24px}
  .contrast h4{font-size:20px;padding:18px 0 6px}
  .c-row{display:grid;grid-template-columns:56px minmax(0,1fr) 140px 140px;gap:14px;align-items:center;padding:9px 0;border-top:1px solid rgba(28,35,64,.12)}
  .c-prev{width:56px;height:38px;border-radius:12px;display:grid;place-items:center;font-weight:600;font-size:18px}
  .c-label{font-size:15px;line-height:1.35}
  .c-label span{display:block;opacity:.65;font-size:14px}
  .c-verdict{font-size:14px;font-weight:600;text-align:right;white-space:nowrap}
  .c-head{font-size:13px;font-weight:600;opacity:.6;text-align:right;padding-bottom:4px}
  .c-ratio{display:block;font-weight:400}
  .v-fail{color:#B3261E}
  
  .specimen{background:var(--white);border-radius:var(--r-card);padding:clamp(24px,4vw,48px)}
  .specimen .display{font-weight:600;font-size:clamp(34px,4.6vw,64px);line-height:1.05;max-width:16ch}
  .scale{margin-top:32px;display:grid;gap:0}
  .scale-row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:baseline;padding:14px 0;border-top:1px solid rgba(28,35,64,.12)}
  .scale-row small{font-size:14px;opacity:.65}
  
  .shapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:end}
  .shape-demo{display:grid;gap:12px;font-size:14px}
  .sd-panel{height:200px;background:var(--peri);border-radius:var(--r-panel)}
  .sd-card{
    height:150px;
    background:var(--white);
    border-radius:var(--r-card);
    box-shadow:0 24px 60px rgba(28,35,64,.10)
  }

  .sd-pill{
    justify-self:start
  }
  
  .stage{
    position:relative;
    height:440px;
    perspective:1200px;
    background:var(--lightgreen);
    border-radius:var(--r-panel);
    overflow:hidden
  }

  .scard{
    position:absolute;
    left:50%;
    top:48px;
    width:min(460px,86%);
    margin-left:calc(min(460px,86%) / -2);
    background:var(--white);
    border-radius:var(--r-card);
    padding:32px;
    box-shadow:0 24px 60px rgba(28,35,64,.10);
    transform-origin:50% 100%;
    transform:translateY(300px) translateZ(-300px) rotateX(48deg);
    opacity:0;
    transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .5s ease
  }
  .scard h4{font-size:30px;margin-bottom:12px}
  .scard p{font-size:15px;opacity:.7;margin-bottom:20px}
  .scard .btn{font-size:14px;padding:10px 20px}
  
  .stage.played .scard{opacity:1}
  .stage-controls{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
  
  .pairs{display:grid;gap:12px}
  .pair{display:grid;grid-template-columns:1fr 1fr;border-radius:20px;overflow:hidden}
  .pair div{padding:18px 22px}
  .pair .yes{background:var(--white)}
  .pair .no{background:rgba(28,35,64,.06)}
  .pair small{display:block;font-size:13px;opacity:.65;margin-bottom:6px}
  .pair .yes p{font-weight:600;font-size:20px;line-height:1.25}
  .pair .no p{font-size:16px;text-decoration:line-through;text-decoration-thickness:1px;opacity:.75}
  
  .logos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  }
  .logo-box{height:180px;border-radius:var(--r-card);display:grid;place-items:center;font-weight:600;font-size:clamp(34px,4vw,52px)}
  
  .imgs {
    display: grid;
    gap: 12px; /* Creates the space between the top and bottom rows */
  }
  
  .imgs-top {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  
  .imgs-bottom {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }
  .asset-card {
    width: 100%;
    height: 260px;
    object-fit: cover; 
    border-radius: var(--r-card);
  }
  
  /* docs + open */
  .docs{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;background:var(--navy);color:var(--white);border-radius:var(--r-panel);padding:clamp(28px,5vw,56px)}
  .docs h3{font-size:clamp(28px,3vw,40px);display:flex;align-items:center;gap:14px}
  .docs p{opacity:.8;margin-top:8px}
  .open-list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .decided-h{font-size:clamp(24px,2.4vw,32px);margin:clamp(20px,3vh,36px) 0 14px}
  .decided-list li{border:2px solid var(--navy)}
  .open-list li{background:var(--white);border-radius:var(--r-card);padding:18px 22px}
  .open-list b{display:block;font-weight:600;font-size:18px;line-height:1.2;margin-bottom:6px}
  .open-list p{font-size:14px;line-height:1.45}
  
  footer{position:relative;z-index:1;background:var(--navy);color:var(--white)}
  .foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding-top:80px;padding-bottom:56px}
  .foot .wordmark{color:var(--white)}
  .foot p{font-size:14px;opacity:.6}
  
  
  :root{--on-coral:#FFFFFF}
  .btn-coral{background:var(--coral);color:var(--on-coral)}
  .decide-list{list-style:none;display:grid;gap:16px;margin-bottom:16px}
  .decide{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:32px 48px;background:var(--white);border-radius:var(--r-panel);padding:clamp(24px,4vw,48px);align-items:center}
  .decide h3{font-size:clamp(26px,2.6vw,34px);margin-bottom:12px}
  .decide p{font-size:16px;margin-bottom:20px}
  .seg{display:inline-flex;flex-wrap:wrap;gap:2px;background:rgba(28,35,64,.07);border-radius:999px;padding:4px}
  .seg button{border:0;background:transparent;font:400 15px/1 "Poppins",system-ui,sans-serif;color:var(--navy);padding:11px 18px;border-radius:999px;cursor:pointer}
  .seg button[aria-pressed="true"]{background:var(--navy);color:var(--white);font-weight:600}
  .live{margin-top:16px;font-size:15px;font-weight:600}
  .live.bad{color:#B3261E}
  .live small{display:block;font-weight:400;opacity:.7;color:var(--navy);margin-top:4px}
  .closing-prev{background:var(--coral);border-radius:var(--r-card);padding:clamp(24px,3vw,40px);min-height:260px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
  .closing-prev p{color:var(--on-coral);font-weight:600;font-size:clamp(24px,2.4vw,34px);line-height:1.1;max-width:16ch;margin:0}
  .closing-prev .on-card{align-self:flex-start;background:var(--white);border-radius:20px;padding:14px}
  .case-prev{background:var(--peri);border-radius:var(--r-card);padding:clamp(24px,3vw,40px);display:grid;gap:18px}
  .case-prev .a{font-weight:600;font-size:clamp(26px,2.8vw,40px);line-height:1.05}
  .case-prev .b{font-weight:600;font-size:22px;line-height:1.1}
  .phones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .phone{display:grid;gap:10px;justify-items:center;font-size:14px;text-align:center;cursor:pointer;background:none;border:0;font-family:inherit;color:var(--navy);padding:8px;border-radius:20px}
  .phone svg{width:100%;max-width:130px;height:auto}
  .phone[aria-pressed="true"]{background:var(--lilac)}
  @media (max-width:980px){
    /* Panels are far taller than a phone screen. Pinned at the top
       they would hide their own lower half, so they stack normally
       here instead. */
    .panel{position:static;min-height:0;border-radius:0;padding:clamp(56px,8vh,88px) 0;box-shadow:none}
  .decide{grid-template-columns:1fr}}
  
  @media (max-width:980px){
    .nav-inner{grid-template-columns:1fr auto;}
    .pillnav{grid-column:1 / -1;grid-row:2;justify-self:center}
    .section-head,.detail{grid-template-columns:1fr}
    .ladder li{grid-template-columns:48px 1fr}
    .ladder .body,.ladder .meta{grid-column:2}
    .ladder .meta{justify-self:start}
    .t-ribbon{grid-column:span 12;min-height:360px;grid-row:auto}
    .t-colour,.t-type,.t-logo,.t-shape{grid-column:span 6}
    .t-motion,.t-voice,.t-imagery{grid-column:span 12}
    .open-list{grid-template-columns:1fr}
  }
  @media (max-width:600px){
    body{font-size:16px}
    .pillnav a,.pillnav span{padding:8px 12px;font-size:14px}
    .nav .btn{padding:10px 16px;font-size:14px}
    .t-colour,.t-type,.t-logo,.t-shape{grid-column:span 12}
    .shapes,.logos{grid-template-columns:1fr}
    .imgs-top, .imgs-bottom {grid-template-columns: 1fr;}
    .pair{grid-template-columns:1fr}
    .c-row{grid-template-columns:52px 1fr 1fr}
    .c-label{grid-column:2 / -1}
    .c-verdict{grid-row:2;text-align:left}
    .c-verdict.w{grid-column:2}
    .c-verdict.a{grid-column:3}
    .c-head{display:none}
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .tile,.scard{transition:none}
  }