/* division-media/index.src.html, extracted by tools/extract_divisions.py. Do not edit here. */
/* ============ TOKENS ============ */
:root{
  --navy:#002F6D; --deep:#00224F; --night:#001A3E; --blue:#0074C8; --bright:#39B5E6; --cyan:#60D0E4;
  --teal:#0AA5B5; --violet:#7C7CCE; --royal:#5E7FD0;
  --mist:#E9EEF0; --ink:#33404F; --mute:#5B6B7C; --line:rgba(0,46,109,.16); --line2:rgba(0,46,109,.09);
  --ff:'Orkney','Hanken Grotesk',system-ui,sans-serif;
  --gut:clamp(1.25rem,4.5vw,4rem); --max:1360px;
  --s3:clamp(2.6rem,5vw,4rem); --s4:clamp(4rem,8vw,7rem);
  --ease:cubic-bezier(.22,1,.36,1);
  --skew:104deg; /* the M's own diagonal */
  /* Media & Comms: the one accent and its derived tones */
  --acc:#60D0E4;
  --acc-soft:rgba(96,208,228,.55);
  --acc-ghost:rgba(96,208,228,.28);
  --acc-glow:0 0 18px rgba(96,208,228,.85), 0 0 44px rgba(96,208,228,.4);
  --acc-ink:#176C8A;
  --band-1:#FFFFFF;
  --band-2:var(--mist);
  --hero-grad:linear-gradient(165deg, #4EC3DA 0%, #60D0E4 42%, #A5E4F0 100%);
  --path-w:1.8px;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; overflow-x:clip}
/* anchor targets land clear of the sticky header */
section[id]{scroll-margin-top:90px}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{font-family:var(--ff); font-size:1.02rem; line-height:1.6; color:var(--ink); background:#fff;
  -webkit-font-smoothing:antialiased; overflow-x:clip; touch-action:manipulation}
h1,h2,h3{color:var(--navy); letter-spacing:0; text-wrap:balance; font-weight:700}
h2{font-weight:300; font-size:clamp(2rem,3.8vw,3.2rem); line-height:1.1; letter-spacing:-.016em}
p{text-wrap:pretty}
a{color:var(--blue)}
img{max-width:100%; display:block}
.wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--gut)}
.skip{position:fixed; top:0; left:-200%; z-index:900; background:var(--navy); color:#fff; padding:.8rem 1.2rem; text-decoration:none}
.skip:focus-visible{left:0}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px}
.dkbg :focus-visible{outline-color:var(--cyan)}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.num{font-variant-numeric:tabular-nums}

/* reveals: visible by default; .js gates them off pre-view */
.io{opacity:1; transform:none}
html.js:not(.rm) .io:not(.in){opacity:0; transform:translateY(16px)}
html.js:not(.rm) .io{transition:opacity .8s var(--ease), transform .8s var(--ease)}
html.js:not(.rm) .stag > *{transition:opacity .7s var(--ease) var(--d,0ms), transform .7s var(--ease) var(--d,0ms)}
html.js:not(.rm) .stag:not(.in) > *{opacity:0; transform:translateY(14px)}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:.6rem; font-family:var(--ff); font-size:.98rem; font-weight:700;
  padding:.95rem 1.5rem; text-decoration:none; border:1px solid var(--navy); color:var(--navy); background:transparent;
  cursor:pointer; transition:background .3s ease, color .3s ease, border-color .3s ease}
.btn:hover{background:var(--navy); color:#fff}
.btn.solid{background:var(--navy); color:#fff}
.btn.solid:hover{background:var(--blue); border-color:var(--blue)}
.btn.inv{border-color:#fff; color:#fff}
.btn.inv:hover{background:#fff; color:var(--navy)}
.btn.inv.solid{background:#fff; color:var(--navy); border-color:#fff}
.btn.inv.solid:hover{background:var(--cyan); border-color:var(--cyan)}
.arw{display:inline-block; transition:transform .35s var(--ease)}
.btn:hover .arw,a:hover .arw{transform:translateX(5px)}

/* ============ HEADER: white, sticky ============ */
.hdr{position:sticky; top:0; z-index:600; background:#fff; border-bottom:1px solid var(--line2)}
.hdr-in{max-width:1500px; margin-inline:auto; padding:.95rem var(--gut); display:flex; align-items:center; gap:2rem}
.lg{display:flex; flex:none; position:relative}
.lg img{height:36px; width:auto; display:block}
.nav{display:flex; align-items:center; gap:1.7rem; margin-left:auto}
.nav > a,.nav button{font-family:var(--ff); font-size:.98rem; font-weight:500; color:var(--navy); text-decoration:none;
  background:none; border:0; -webkit-appearance:none; appearance:none; cursor:pointer; padding:.35rem 0;
  transition:color .3s ease}
.nav > a:hover,.nav button:hover{color:var(--blue)}
.lang{display:flex; gap:.7rem; padding-left:1.4rem; border-left:1px solid var(--line); font-size:.9rem}
.lang b{color:var(--navy); font-weight:700}
.lang a{color:var(--mute); text-decoration:none; font-weight:400}
.nav > a.back{font-weight:400; color:var(--mute)}
.nav > a.back:hover{color:var(--acc-ink)}
.hdr .btn{padding:.7rem 1.15rem; font-size:.9rem}
.nav > a.btn.hcta{border:1px solid var(--navy); padding:.7rem 1.15rem; color:var(--navy)}
.nav > a.btn.hcta:hover{color:#fff; background:var(--navy)}
.burger{display:none; margin-left:auto; background:none; border:0; cursor:pointer; padding:.5rem; z-index:660}
.burger i{display:block; width:24px; height:2px; background:var(--navy); margin:5px 0; transition:transform .3s ease, opacity .3s ease, background .3s ease}
.mnav-open .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mnav-open .burger i:nth-child(2){opacity:0}
.mnav-open .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{display:none}
@media (max-width:1319px){
  .nav{display:none}
  .burger{display:block}
  .lg img{height:30px}
  .mnav{display:none; position:fixed; inset:0; z-index:560; background:#fff; padding:6rem var(--gut) 3rem; overflow:auto; overscroll-behavior:contain}
  .mnav-open .hdr{background:rgba(255,255,255,.98)}
  .mnav-open .mnav{display:block}
  .mnav a{display:block; font-size:1.35rem; font-weight:700; color:var(--navy); text-decoration:none;
    padding:.75rem 0; border-bottom:1px solid var(--line2)}
  .mnav a.sm{font-size:1rem; font-weight:400; color:var(--ink)}
  .mnav .mlang{margin-top:1.6rem; font-size:.95rem; color:var(--mute)}
  .mnav .mlang b{color:var(--navy)}
  .mnav .mlang a{display:inline; border:0; padding:0 0 0 .8rem; font-size:.95rem; font-weight:400; color:var(--mute)}
}

/* ============ HERO: the broadcast field ============ */
/* No seam, no photograph: this hero deliberately does NOT share the homepage's skeleton.
   The background is the logo's own light blue; the canvas draws only the Media card's
   pulsing circles, rising from invisible seeded sources, with the cursor spawning its
   own ripples on fine-pointer devices. Copy sits over it in the deep navy. */
.hero{position:relative; min-height:min(88svh,840px); display:flex; align-items:center; overflow:hidden;
  color:var(--deep);
  /* every circle on this hero belongs to the photograph: the concentric rings live on the
     figure itself (so they track it at every size) and the canvas emits from it alone */
  background:var(--hero-grad)}
.hero-fx{position:absolute; inset:0; z-index:1; width:100%; height:100%; display:block; opacity:0}
html.js.ld:not(.rm) .hero-fx{opacity:1; transition:opacity 1.6s var(--ease) .35s}
html.js.rm .hero-fx{opacity:.9}
html:not(.js) .hero-fx{display:none}
.hero-in{position:relative; z-index:2; width:100%; max-width:var(--max); margin-inline:auto;
  padding:clamp(3rem,9vh,6rem) var(--gut)}
/* the broadcast source: the photograph as a large circle bleeding off the hero's right
   edge, partially cut, its concentric rings on the figure so they track it at every size */
.hero-ph{position:absolute; z-index:1; margin:0; right:0; top:50%;
  width:min(96vh,60rem); transform:translate(34%,-50%)}
.hero-ph img{width:100%; aspect-ratio:1; height:auto; border-radius:50%; object-fit:cover;
  box-shadow:0 28px 70px rgba(0,26,62,.35)}
html.js:not(.rm) .hero-ph{opacity:0; transition:opacity 1.4s var(--ease) .4s}
html.js.ld:not(.rm) .hero-ph{opacity:1}
.hero-ph::before,.hero-ph::after{content:""; position:absolute; border-radius:50%; pointer-events:none}
.hero-ph::before{inset:-5%; border:1.5px solid rgba(255,255,255,.7)}
.hero-ph::after{inset:-12%; border:1.5px solid rgba(255,255,255,.38)}
/* the source pulsates: the photograph breathes and its outer ring emits outward.
   Both stop under reduced motion (html.rm and the media query below). */
html:not(.rm) .hero-ph img{animation:hpBreathe 5.6s ease-in-out infinite}
html:not(.rm) .hero-ph::after{animation:hpRing 4.8s cubic-bezier(.22,1,.36,1) infinite}
@keyframes hpBreathe{0%,100%{transform:scale(1)} 50%{transform:scale(1.018)}}
@keyframes hpRing{0%{transform:scale(.88); opacity:0} 14%{opacity:.9} 100%{transform:scale(1.32); opacity:0}}
/* the copy keeps clear of the circle */
.hero-txt{max-width:min(52%,50rem)}
@media (max-width:900px){
  .hero-txt{max-width:none}
  .hero-ph{width:min(64vw,22rem); top:auto; bottom:0; transform:translate(30%,36%)}
  .hero-in{padding-bottom:clamp(9rem,42vw,14rem)}
}
/* a soft white field behind the copy so the navy holds against the saturated cyan */
.hero-txt{position:relative}
.hero-txt::before{content:""; position:absolute; inset:-30% -14% -30% -20%; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,255,255,.48), rgba(255,255,255,.2) 58%, transparent 100%)}
/* The homepage H1 grammar at the homepage-adjacent size. Regular, not Light: 300-weight
   strokes shimmer on the saturated cyan. The em takes a white highlight; a coloured em
   cannot reach contrast on this ground. */
.hero h1{color:var(--deep); font-weight:400; font-size:clamp(2.5rem,5vw,4.5rem); line-height:1.08; letter-spacing:-.02em; max-width:12em; text-wrap:balance}
.hero-sub{margin-top:1.2rem; max-width:30rem; font-size:clamp(1.05rem,1.4vw,1.22rem); line-height:1.55; color:var(--deep)}
/* one emphasis device per headline: the highlight carries it, so the b stays regular here */
.hero h1 b{font-weight:400}
.hero h1 em{font-style:normal; font-weight:700; color:var(--deep); background:rgba(255,255,255,.66);
  padding:.02em .14em; margin-inline:-.03em; white-space:nowrap;
  -webkit-box-decoration-break:clone; box-decoration-break:clone}
.hero-cta{margin-top:2.2rem; display:flex; flex-wrap:wrap; gap:.9rem}
html.js:not(.rm) .hl{opacity:0; transform:translateY(18px)}
html.js.ld:not(.rm) .hl{opacity:1; transform:none; transition:opacity 1s var(--ease) var(--lo,0ms), transform 1s var(--ease) var(--lo,0ms)}
@media (max-width:819px){
  .hero{min-height:min(72svh,640px)}
  .hero h1{max-width:none}
}

/* ============ STATEMENT ============ */
.statement{background:var(--band-1)}
.statement .wrap{padding-block:var(--s3)}
.st-in{position:relative; padding-left:clamp(1.4rem,2.5vw,2.4rem)}
.spine{position:absolute; left:0; top:0; bottom:0; width:1px; pointer-events:none;
  background:linear-gradient(180deg, var(--acc), rgba(96,208,228,.13) 82%, transparent)}
/* the 6px square where the spine takes the message over from the hero's origin node */
.spine::before{content:""; position:absolute; top:0; left:-2.5px; width:6px; height:6px; background:var(--acc)}
.st-1{font-weight:300; font-size:clamp(1.6rem,2.9vw,2.5rem); line-height:1.22; letter-spacing:-.014em; color:var(--navy); max-width:26em; text-wrap:balance}
.st-2{margin-top:1.3rem; font-weight:300; font-size:clamp(1.05rem,1.45vw,1.26rem); line-height:1.6; color:var(--ink); max-width:36rem}

/* ============ SERVICES: four channels, each opening its full list ============ */
.services{background:var(--band-2)}
.services .wrap{padding-block:var(--s4)}
.svc-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1.6rem,2.6vw,2.6rem);
  margin-top:clamp(2.4rem,5vw,3.8rem)}
.svc-card{display:flex; flex-direction:column}
.svc-ph{margin:0; overflow:hidden; background:var(--deep)}
.svc-ph img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover}
.svc-card h3{margin-top:1.4rem; font-weight:300; font-size:clamp(1.4rem,1.8vw,1.65rem); line-height:1.15;
  letter-spacing:-.012em; color:var(--navy)}
.svc-card p{margin-top:.8rem; margin-bottom:auto; font-size:.97rem; line-height:1.6; color:var(--ink); max-width:24rem}
.svc-card .btn{margin-top:1.6rem; align-self:flex-start; padding:.8rem 1.2rem; font-size:.92rem}
/* the division's pulse: each photograph opens as a circle from its centre, one after the other.
   Armed by JS only while the section is still below the fold, so no render ships a blank frame. */
html.js:not(.rm) .services.pr:not(.in) .svc-ph img{clip-path:circle(0% at 50% 50%)}
html.js:not(.rm) .services.pr.in .svc-ph img{clip-path:circle(75% at 50% 50%);
  transition:clip-path 1.15s var(--ease) calc(.2s + var(--d,0ms))}
@media (max-width:1100px){ .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.8rem 2rem} }
@media (max-width:600px){ .svc-grid{grid-template-columns:1fr; gap:2.6rem} .svc-ph img{aspect-ratio:16/9} }

/* the pop-up: the channel's full list on the navy ground */
dialog.pol.sd{width:min(66rem,calc(100vw - 2rem)); max-height:min(88vh,54rem); background:var(--deep); color:#C8D3E2}
.sd .pol-in{padding:clamp(1.8rem,4vw,3rem) clamp(1.3rem,4vw,3rem) clamp(2rem,4vw,3rem)}
.sd .pol-x{color:#B5C1D4}
.sd .pol-x:hover{color:#fff}
.sd-hd{display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(1.3rem,3vw,2.2rem); align-items:center; padding-right:2.2rem}
.sd-ph{position:relative; display:block; width:clamp(84px,10vw,120px); aspect-ratio:1}
.sd-ph img{width:100%; height:100%; object-fit:cover; border-radius:50%}
.sd-ph::after{content:""; position:absolute; inset:-8px; border-radius:50%; border:1.5px solid var(--acc-soft)}
.sd h2{color:#fff; font-weight:300; font-size:clamp(1.6rem,3vw,2.3rem); line-height:1.1; letter-spacing:-.014em}
.sd-hd p{margin-top:.6rem; font-size:1rem; line-height:1.6; color:#C8D3E2; max-width:40rem}
.sd-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(1.8rem,4vw,3.4rem); margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.sd-list > div{padding:1rem 0 1.05rem; border-top:1px solid rgba(182,194,214,.16)}
.sd-list dt{font-size:1rem; font-weight:700; line-height:1.35; color:#fff; transition:color .25s ease}
.sd-list dd{margin-top:.3rem; font-size:.92rem; line-height:1.55; color:#AEBBD0}
/* the client's ask: the sub-service name takes the division's light blue under the pointer */
@media (hover:hover){ .sd-list > div:hover dt{color:var(--acc)} }
html:not(.rm) dialog.sd[open]{animation:sdIn .45s var(--ease)}
html:not(.rm) dialog.sd[open] .sd-list > div{animation:sdItem .5s var(--ease) both; animation-delay:calc(.14s + var(--d,0ms))}
@keyframes sdIn{from{opacity:0; transform:translateY(14px)}}
@keyframes sdItem{from{opacity:0; transform:translateY(8px)}}
@media (max-width:700px){
  .sd-list{grid-template-columns:1fr}
  .sd-hd{grid-template-columns:1fr; padding-right:1.6rem}
}

/* ============ ABOUT THE DIVISION: navy band ============ */
.about{background:var(--deep); color:#C8D3E2}
.about .wrap{padding-block:var(--s4)}
.about h2{color:#fff}
.about-grid{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(2.4rem,6vw,6rem); align-items:center}
.about-txt h2{margin-bottom:2rem}
/* the city the firm works from, in the division's circle, its two rings echoing the hero's */
.about-ph{position:relative; margin:0; width:min(100%,26rem); justify-self:center}
.about-ph img{width:100%; height:auto; aspect-ratio:1; border-radius:50%; object-fit:cover; object-position:46% 50%}
.about-ph::before,.about-ph::after{content:""; position:absolute; border-radius:50%; pointer-events:none}
.about-ph::before{inset:-5%; border:1.5px solid var(--acc-soft)}
.about-ph::after{inset:-11%; border:1.5px solid var(--acc-ghost)}
.about-txt p{font-size:clamp(1.02rem,1.35vw,1.18rem); line-height:1.7; max-width:38rem}
.about-txt p + p{margin-top:1.2rem}
@media (max-width:900px){ .about-grid{grid-template-columns:1fr} .about-ph{width:min(68%,19rem); margin-block:1.4rem .6rem} }

/* ============ CTA BAND: the hero's blue returns ============ */
.ctab{position:relative; overflow:hidden; background:var(--hero-grad); color:var(--deep)}
.ctab::before,.ctab::after{content:""; position:absolute; border-radius:50%; pointer-events:none;
  border:1.5px solid rgba(255,255,255,.55)}
.ctab::before{width:340px; height:340px; right:-90px; top:50%; transform:translateY(-50%)}
.ctab::after{width:520px; height:520px; right:-180px; top:50%; transform:translateY(-50%);
  border-color:rgba(255,255,255,.3)}
.ctab .wrap{padding-block:var(--s3)}
.ctab h2{color:var(--deep)}
.ctab-p{margin-top:.9rem; max-width:34rem; color:var(--deep)}
.ctab .btn{margin-top:1.8rem}

/* ============ TEAM: the masthead ============ */
.team{background:var(--band-1)}
.team .wrap{padding-block:var(--s4)}
/* the heading sits on the masthead rule: the rule runs edge to edge behind the word, white knockout behind the text */
.team-hd{position:relative}
.team-hd h2{position:relative; z-index:1; display:inline-block; padding-right:1.4rem; background:var(--band-1)}
.mast-rule{position:absolute; left:0; right:0; top:58%; height:1px; transform-origin:left;
  background:linear-gradient(90deg, var(--acc), var(--acc) 40%, var(--acc-soft) 70%, rgba(96,208,228,.25))}
.mast{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1.7rem 1.2rem; margin-top:2.2rem; list-style:none}
/* one plate for every studio background: grayscale under a navy multiply, colour returning under the pointer */
.ph-w{position:relative; display:block}
.mast .ph{position:relative; display:block; overflow:hidden; margin:0}
.mast .ph::after{content:""; position:absolute; inset:0; background:rgba(0,47,109,.18); mix-blend-mode:multiply; transition:opacity .5s ease}
.mast img{aspect-ratio:3/4; width:100%; height:auto; object-fit:cover; object-position:center top; filter:grayscale(1) contrast(1.05); transition:filter .5s ease}
.mast li:hover img{filter:none}
.mast li:hover .ph::after{opacity:0}
/* no portrait supplied yet: the initials hold the place on the same plate */
.mast .ph-none{aspect-ratio:3/4; display:grid; place-content:center; background:var(--mist)}
.mast .ph-none i{font-style:normal; font-weight:300; font-size:clamp(1.8rem,2.6vw,2.4rem); letter-spacing:.02em; color:var(--navy)}
.mast .li{position:absolute; z-index:1; right:0; bottom:0; width:30px; height:30px; display:grid;
  place-content:center; background:var(--navy); color:#fff; transition:background .3s ease}
.mast .li svg{width:15px; height:15px; fill:currentColor; display:block}
.mast .li:hover{background:var(--blue)}
.mast b{display:block; margin-top:.65rem; font-size:.98rem; font-weight:700; line-height:1.3; color:var(--navy)}
.mast .tt{display:block; margin-top:.15rem; font-size:.8rem; line-height:1.35; color:var(--mute)}
.join{margin-top:2.8rem; padding-top:1.4rem; border-top:1px solid var(--line); font-size:1rem; color:var(--ink)}
.join b{color:var(--navy)}
.join a{color:var(--acc-ink); font-weight:700; text-decoration:none; border-bottom:2px solid var(--acc); padding-bottom:.1em;
  transition:color .3s ease, border-color .3s ease}
.join a:hover{color:var(--navy); border-color:var(--navy)}
html.js:not(.rm) .mast-rule{transform:scaleX(0); transition:transform 1.1s var(--ease)}
html.js:not(.rm) .mast li{opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease) var(--d,0ms), transform .6s var(--ease) var(--d,0ms)}
html.js:not(.rm) .team.in .mast-rule{transform:scaleX(1)}
html.js:not(.rm) .team.in .mast li{opacity:1; transform:none}
@media (max-width:1100px){ .mast{grid-template-columns:repeat(5,minmax(0,1fr))} }
@media (max-width:820px){ .mast{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:600px){ .mast{grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.3rem .9rem} }
@media (max-width:420px){ .mast{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ============ CONTACT ============ */
.contact{background:var(--band-2); color:var(--ink)}
.contact h2{color:var(--navy)}
.contact .wrap{padding-block:var(--s4); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2.4rem,6vw,6rem); align-items:center}
.contact .sub{margin-top:1.1rem; max-width:34rem; color:var(--ink)}
/* r13: social links, white square tiles with navy brand glyphs (Font Awesome Free 6 brand icons, CC BY 4.0,
   fontawesome.com). 34px tiles; the ::after widens each hit area to 44px. Colour change only on hover. */
.soc{display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0 0 1.6rem; padding:0}
.soc a{position:relative; display:flex; align-items:center; justify-content:center; width:34px; height:34px; background:#fff; color:var(--navy); box-shadow:inset 0 0 0 1px var(--line); transition:background-color .2s ease, color .2s ease}
.soc a::after{content:""; position:absolute; inset:-5px}
.soc svg{display:block; width:18px; height:18px; fill:currentColor}
.soc a:hover{background:var(--navy); color:#fff}
.dkbg .soc a{box-shadow:none}
.dkbg .soc a:hover{background:var(--cyan); color:var(--navy)}
.ty .soc{margin:clamp(2.4rem,4.4vw,3.4rem) 0 0}
.ty .soc + .cways{margin-top:1.6rem}
html.rm .soc a{transition:none}
@media (prefers-reduced-motion:reduce){ .soc a{transition:none} }
/* the left column takes the homepage's register: hairline rows with a 2px accent rule that draws in */
.cways{margin-top:2.2rem; display:flex; flex-direction:column}
.cways a,.office{position:relative; padding:.95rem 0 .95rem 1.15rem; border-top:1px solid var(--line2)}
.cways a::before,.office::before{content:""; position:absolute; left:0; top:1rem; bottom:1rem; width:2px; background:var(--acc); transform-origin:top}
.cways a{display:flex; flex-wrap:wrap; gap:.3rem 1.4rem; align-items:baseline; text-decoration:none}
.cways .l{font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); min-width:7rem}
.cways .v{font-size:1.12rem; font-weight:700; color:var(--navy); transition:color .3s ease}
.cways a:hover .v{color:var(--blue)}
.office{margin-top:0; font-style:normal; font-size:.98rem; color:var(--ink); line-height:1.65; border-bottom:1px solid var(--line2)}
.office b{display:block; color:var(--navy)}
html.js:not(.rm) .cways a::before,html.js:not(.rm) .office::before{transform:scaleY(0); transition:transform .8s var(--ease) var(--rd,0ms)}
html.js:not(.rm) .contact .in .cways a::before,html.js:not(.rm) .contact .in .office::before{transform:scaleY(1)}
.cform{background:#fff; padding:clamp(1.6rem,3vw,2.4rem); color:var(--ink); align-self:start}
.field{margin-bottom:1.15rem}
.field label{display:block; font-size:.8rem; font-weight:700; color:var(--navy); margin-bottom:.4rem}
.field input,.field select,.field textarea{width:100%; font-family:var(--ff); font-size:.98rem; color:var(--ink);
  background:#fff; border:1px solid rgba(0,46,109,.4); padding:.85rem 1rem}
.field select{background-color:#fff; color:var(--ink)}
.field textarea{min-height:6.5rem; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--blue); border-color:transparent}
.f-help{margin-top:.4rem; font-size:.8rem; color:var(--mute)}
.f-after{margin-top:1rem; font-size:.82rem; color:var(--mute)}
@media (max-width:960px){ .contact .wrap{grid-template-columns:1fr} }

/* ============ FOOTER ============ */
.ft{background:var(--deep); color:#B5C1D4}
.ft .wrap{padding-block:3.4rem 2.4rem}
.ft-top{display:grid; grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,.8fr)); gap:2.5rem}
.ft .lg2 img{height:42px; width:auto; display:block}
.ft p{font-size:.9rem; margin-top:1rem; max-width:24rem}
.ft h3{color:#fff; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.9rem}
.ft ul{list-style:none; display:flex; flex-direction:column; gap:.45rem}
.ft a{color:#B5C1D4; text-decoration:none; font-size:.92rem; display:inline-block; padding:.15rem 0}
.ft a:hover{color:#fff}
.ft a[hreflang]{text-decoration:underline; text-underline-offset:3px}
.ft-btm{margin-top:2.8rem; padding-top:1.6rem; border-top:1px solid rgba(182,194,214,.18);
  display:flex; flex-wrap:wrap; gap:1rem 3rem; justify-content:space-between; font-size:.82rem}
.ft-btm address{font-style:normal; line-height:1.6}
.ft-btm .ft-cr{flex-basis:100%; max-width:none; margin-top:0; font-size:.68rem; line-height:1.55; color:rgba(181,193,212,.48)}
.ft .ft-cr a{display:inline; padding:0; font-size:inherit; color:inherit; text-decoration:underline; text-underline-offset:2px}
.ft .ft-cr a:hover{color:#B5C1D4}
@media (max-width:900px){ .ft-top{grid-template-columns:1fr 1fr} }

/* ============ CONSENT: banner and policies ============ */
.ckb{position:fixed; left:0; right:0; bottom:0; z-index:800; background:var(--night); color:#C8D3E2;
  border-top:2px solid var(--blue); box-shadow:0 -14px 40px rgba(0,16,40,.3);
  transform:translateY(101%); transition:transform .55s var(--ease)}
.ckb.up{transform:none}
.ckb[hidden]{display:none}
.ckb-in{max-width:var(--max); margin-inline:auto; padding:1.15rem var(--gut) 1.25rem;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.9rem 2.4rem; align-items:center}
.ckb p{font-size:.9rem; line-height:1.55; max-width:46rem}
.ckb-l{margin-top:.5rem; display:flex; gap:1.2rem; font-size:.8rem}
.ckb-a{display:flex; flex-wrap:wrap; gap:.6rem; justify-content:flex-end}
.ckb-a button{font-family:inherit; font-size:.82rem; font-weight:700; letter-spacing:.02em; cursor:pointer;
  padding:.72em 1.25em; border:1px solid rgba(200,211,226,.42); background:transparent; color:#DCE5F0;
  transition:background .25s ease, color .25s ease, border-color .25s ease}
.ckb-a button:hover{border-color:#fff; color:#fff}
.ckb-a button.solid{background:var(--blue); border-color:var(--blue); color:#fff}
.ckb-a button.solid:hover{background:var(--bright); border-color:var(--bright)}
.lnk{font-family:inherit; font-size:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px}
.ckb .lnk{color:#9FB4CE}
.ckb .lnk:hover{color:#fff}
.ckb-pref{grid-column:1/-1; display:none; border-top:1px solid rgba(200,211,226,.16); margin-top:.4rem; padding-top:1rem}
.ckb.open .ckb-pref{display:block}
.ckb-pref label{display:flex; gap:.7rem; align-items:flex-start; padding:.5rem 0; font-size:.86rem}
.ckb-pref input{margin-top:.28rem; width:1rem; height:1rem; flex:none; appearance:none; -webkit-appearance:none;
  border:1px solid rgba(200,211,226,.55); background:transparent; display:inline-grid; place-content:center; cursor:pointer}
.ckb-pref input::before{content:""; width:.55rem; height:.55rem; background:var(--bright); transform:scale(0); transition:transform .15s ease}
.ckb-pref input:checked::before{transform:scale(1)}
.ckb-pref input:disabled{border-color:rgba(200,211,226,.3); cursor:default}
.ckb-pref input:disabled::before{background:rgba(200,211,226,.55)}
.ckb-pref span b{display:block; color:#fff; font-weight:700}
.ckb-pref span i{font-style:normal; color:#93A7C0}
@media (max-width:820px){
  .ckb-in{grid-template-columns:1fr}
  .ckb-a{justify-content:flex-start}
}
dialog.pol{width:min(46rem,calc(100vw - 2rem)); max-height:min(80vh,44rem); margin:auto; border:0; padding:0; color:var(--ink);
  background:#fff; box-shadow:0 30px 80px rgba(0,20,50,.35); border-top:3px solid var(--acc)}
dialog.pol::backdrop{background:rgba(0,26,62,.62)}
.pol-in{padding:2.2rem clamp(1.4rem,4vw,2.6rem) 2.4rem; overflow:auto; max-height:inherit}
.pol h2{font-size:clamp(1.5rem,3vw,2.1rem)}
.pol p{margin-top:1rem; font-size:.95rem; line-height:1.68; max-width:38rem}
.pol .upd{margin-top:1.7rem; padding-top:1rem; border-top:1px solid var(--line2);
  font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; color:var(--mute)}
.pol-x{position:absolute; top:.65rem; right:.65rem; width:2.4rem; height:2.4rem; cursor:pointer;
  border:0; background:none; color:var(--mute); font-size:1.5rem; line-height:1; font-family:inherit}
.pol-x:hover{color:var(--navy)}
/* the consent block sits on the white form panel */
.consent{grid-column:1/-1; margin:.4rem 0 .3rem; padding-top:1rem; border-top:1px solid var(--line2)}
.consent label{display:flex; gap:.75rem; align-items:flex-start; padding:.4rem 0; font-size:.85rem; line-height:1.5;
  color:var(--ink); cursor:pointer}
.consent input{margin-top:.22rem; width:1rem; height:1rem; flex:none; appearance:none; -webkit-appearance:none;
  border:1px solid var(--navy); background:#fff; display:inline-grid; place-content:center; cursor:pointer}
.consent input::before{content:""; width:.55rem; height:.55rem; background:var(--blue); transform:scale(0); transition:transform .15s ease}
.consent input:checked::before{transform:scale(1)}
.consent .lnk{color:var(--blue); font-weight:700}
.consent .req{color:#B0402E; font-weight:700}
@media (prefers-reduced-motion:reduce){ .ckb{transition:none} }

/* gradient CTAs (ported from the KokonutUI gradient-button component) */
.btn{transition:background .3s ease, color .3s ease, border-color .3s ease, transform .18s ease, box-shadow .4s ease}
.btn:active{transform:scale(.97)}
.btn.solid{border:1px solid transparent;
  background:linear-gradient(var(--navy), var(--navy)) padding-box,
             linear-gradient(120deg, #0074C8, #60D0E4 55%, #002F6D) border-box}
.btn.solid:hover{color:#fff;
  background:linear-gradient(var(--blue), var(--blue)) padding-box,
             linear-gradient(120deg, #60D0E4, #0074C8 55%, #0AA5B5) border-box;
  box-shadow:0 10px 26px rgba(30,124,214,.32)}
.btn.inv.solid{border:1px solid transparent; color:var(--navy);
  background:linear-gradient(#fff, #fff) padding-box,
             linear-gradient(120deg, #60D0E4, #FFFFFF 45%, #0074C8) border-box}
.btn.inv.solid:hover{color:var(--navy);
  background:linear-gradient(var(--cyan), var(--cyan)) padding-box,
             linear-gradient(120deg, #FFFFFF, #60D0E4 55%, #0074C8) border-box;
  box-shadow:0 10px 26px rgba(96,208,228,.35)}

@media (prefers-reduced-motion:reduce){
  html .io,html .stag > *,html .hl{opacity:1!important; transform:none!important; transition:none!important}
  .mast img,.mast .ph::after,.arw,.btn,.nav > a,.cways .v,.sd-list dt{transition:none!important}
  .svc-ph img{clip-path:none!important; transition:none!important}
  dialog.sd[open],dialog.sd[open] .sd-list > div{animation:none!important}
  .hero-ph img,.hero-ph::after{animation:none!important}
}
/* one header for every Miranda page (3 Oct 2026): the same logo size, bar height, link size and link
   spacing on each page. Spacing tightens below 1440px, and every page switches to the menu at 1319px */
.hdr-in{min-height:78px}
.lg img{height:36px}
.nav{gap:1.7rem}
.nav > a,.nav .lang{white-space:nowrap}
.nav > a,.nav button{font-size:.98rem}
@media (max-width:1439px){ .nav{gap:1.15rem} }
@media (max-width:1319px){ .lg img{height:30px} }
/* one hero heading for every division (6 Oct 2026): the same size, weight, line height and tracking on
   each page, 60px at 1440px; the colour stays with each page's hero */
.hero h1{font-size:clamp(2.4rem,4.17vw,3.75rem); font-weight:300; line-height:1.08; letter-spacing:-.02em}
/* r12 (12 Oct 2026), client comments SF5 and SF6: the service photographs (and the same photograph in
   each pop-up) and the About circle sit under a transparent wash of the logo teal #60D0E4. On the cards the
   wash rides the same circle reveal as its photograph, so no frame shows a teal square before the photo */
.svc-ph{position:relative}
.svc-ph::after{content:""; position:absolute; inset:0; pointer-events:none; background:rgba(96,208,228,.4)}
html.js:not(.rm) .services.pr:not(.in) .svc-ph::after{clip-path:circle(0% at 50% 50%)}
html.js:not(.rm) .services.pr.in .svc-ph::after{clip-path:circle(75% at 50% 50%); transition:clip-path 1.15s var(--ease) calc(.2s + var(--d,0ms))}
.sd-ph::before{content:""; position:absolute; inset:0; z-index:1; border-radius:50%; pointer-events:none; background:rgba(96,208,228,.4)}
.about-tint{position:absolute; inset:0; border-radius:50%; pointer-events:none; background:rgba(96,208,228,.34)}
/* nine people: rows of five (five and four) across the full column, two columns on phones */
.mast{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:600px){ .mast{grid-template-columns:repeat(2,minmax(0,1fr))} }