/* ==========================================================================
   PONTUM SOLUTIONS — stylesheet
   Contents: 1 Tokens  2 Reset  3 Layout grid  4 Type  5 Buttons & links
             6 Utility bar & header  7 Hero  8 Services  9 Process
             10 Sectors  11 Licensing  12 About  13 Contact  14 Footer
             15 Motion & focus  16 Responsive
   ========================================================================== */

/* ----- 1. TOKENS ---------------------------------------------------------- */
:root{
  /* colour */
  --white:        #FFFFFF;
  --off-white:    #F4F6F5;
  --ink:          #0D1712;   /* near-black, slight green undertone */
  --ink-soft:     #3C463F;   /* secondary text */
  --muted:        #5B6862;   /* tertiary text, captions */
  --forest:       #0A3D28;   /* deep forest green — headings, structure */
  --forest-dark:  #072A1C;
  --green:        #00C165;   /* brand accent — small doses only */
  --border:       #E2E6E4;
  --border-dark:  #C9D1CC;

  /* type */
  --font: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --fs-body:      1rem;
  --fs-small:     0.875rem;
  --fs-caption:   0.8125rem;
  --fs-h1:        clamp(2rem, 1.55rem + 1.9vw, 3.25rem);
  --fs-h2:        clamp(1.5rem, 1.3rem + 0.85vw, 2.25rem);
  --fs-h3:        1.25rem;
  --fs-lead:      1.125rem;
  --lh-body:      1.6;
  --lh-tight:     1.15;
  --measure:      68ch;

  /* spacing */
  --space-1:  0.5rem;
  --space-2:  0.75rem;
  --space-3:  1rem;
  --space-4:  1.5rem;
  --space-5:  2rem;
  --space-6:  3rem;
  --space-7:  4.5rem;
  --space-8:  6.5rem;

  /* structure */
  --wrap:        1280px;
  --pad-inline:  clamp(20px, 5vw, 56px);
  --radius:      4px;
  --border-w:    1px;
  --transition:  140ms ease;
}

/* ----- 2. RESET ------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:112px;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font);
  font-weight:400;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4,p,figure{ margin:0; }
table{ border-collapse:collapse; width:100%; }

.skip-link{
  position:absolute;
  left:8px;
  top:-48px;
  background:var(--forest);
  color:var(--white);
  padding:12px 18px;
  z-index:500;
  border-radius:var(--radius);
  transition:top var(--transition);
}
.skip-link:focus{ top:8px; }

:focus-visible{
  outline:2px solid var(--forest);
  outline-offset:3px;
}

/* ----- 3. LAYOUT GRID ------------------------------------------------------ */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--pad-inline);
}
.grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:var(--space-5);
}
.col-head{ grid-column:1 / span 4; }
.col-body{ grid-column:6 / span 7; }
.col-full{ grid-column:1 / span 12; }

.section{
  padding-block:var(--space-8);
  border-top:var(--border-w) solid var(--border);
}
.section--tint{ background:var(--off-white); }
.section-label{
  color:var(--forest);
  font-weight:600;
  font-size:var(--fs-small);
  padding-top:var(--space-3);
  border-top:2px solid var(--green);
  display:inline-block;
  margin-bottom:var(--space-3);
}
.section-title{
  font-size:var(--fs-h2);
  font-weight:700;
  line-height:var(--lh-tight);
  letter-spacing:-0.01em;
  color:var(--forest);
  max-width:26ch;
}
.section-intro{
  color:var(--ink-soft);
  font-size:var(--fs-lead);
  max-width:42ch;
  margin-top:var(--space-3);
}

/* ----- 4. TYPE -------------------------------------------------------------- */
h1,h2,h3,h4{ color:var(--forest); font-weight:700; letter-spacing:-0.01em; }
.lead{ font-size:var(--fs-lead); color:var(--ink-soft); max-width:var(--measure); }
.body-copy p + p{ margin-top:var(--space-3); }
.body-copy p{ max-width:var(--measure); color:var(--ink-soft); }
.caption{ font-size:var(--fs-caption); color:var(--muted); }

/* ----- 5. BUTTONS & LINKS --------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  padding:0.85rem 1.5rem;
  border-radius:var(--radius);
  font-weight:600;
  font-size:var(--fs-small);
  border:var(--border-w) solid transparent;
  transition:background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
  cursor:pointer;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn--primary{
  background:var(--forest);
  color:var(--white);
}
.btn--primary:hover{ background:var(--forest-dark); }
.btn--secondary{
  background:transparent;
  color:var(--forest);
  border-color:var(--border-dark);
}
.btn--secondary:hover{ border-color:var(--forest); background:var(--off-white); }

.text-link{
  position:relative;
  color:var(--forest);
  font-weight:600;
  border-bottom:2px solid var(--green);
  padding-bottom:1px;
  transition:opacity var(--transition);
}
.text-link:hover{ opacity:0.7; }

/* ----- 6. UTILITY BAR & HEADER ---------------------------------------------- */
.utility-bar{
  background:var(--forest);
  color:var(--off-white);
}
.utility-bar .wrap{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--space-2);
  padding-block:0.5rem;
  font-size:var(--fs-caption);
}
.utility-bar a{ color:var(--off-white); }
.utility-bar a:hover{ color:var(--green); }
.utility-list{ display:flex; gap:var(--space-4); flex-wrap:wrap; }

header.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--white);
  border-bottom:var(--border-w) solid var(--border);
}
.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
  padding-block:var(--space-3);
}
.brand{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  min-width:0;
}
.brand-mark{ width:36px; height:auto; flex-shrink:0; transition:transform 300ms ease; }
.brand:hover .brand-mark{ transform:rotate(6deg); }
.brand-text{ line-height:1.2; min-width:0; }
.brand-name{
  font-weight:700;
  font-size:1.05rem;
  color:var(--ink);
  letter-spacing:-0.01em;
  white-space:nowrap;
}
.brand-tag{
  display:block;
  font-size:0.7rem;
  color:var(--muted);
  font-weight:500;
  white-space:nowrap;
}

.nav-toggle{ flex-shrink:0; }
.nav-toggle > summary{
  list-style:none;
  cursor:pointer;
  display:none;
  align-items:center;
  gap:0.5rem;
  padding:0.6rem 0.9rem;
  border:var(--border-w) solid var(--border-dark);
  border-radius:var(--radius);
  font-weight:600;
  font-size:var(--fs-small);
}
.nav-toggle > summary::-webkit-details-marker{ display:none; }
.nav-toggle > summary::before{
  content:"";
  width:16px; height:11px;
  flex-shrink:0;
  background:
    linear-gradient(var(--forest),var(--forest)) top / 100% 1.5px no-repeat,
    linear-gradient(var(--forest),var(--forest)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--forest),var(--forest)) bottom / 100% 1.5px no-repeat;
}
@media (max-width:480px){
  .nav-toggle > summary{ padding:0.6rem; }
  .nav-toggle > summary .nav-toggle-label{ display:none; }
}

nav.primary-nav{
  display:flex;
  align-items:center;
  gap:var(--space-5);
  flex-wrap:wrap;
}
nav.primary-nav a{
  font-weight:600;
  font-size:var(--fs-small);
  color:var(--ink-soft);
  padding-block:0.25rem;
  border-bottom:2px solid transparent;
  transition:color var(--transition), border-color var(--transition);
}
nav.primary-nav a:hover{ color:var(--forest); border-bottom-color:var(--green); }

.header-actions{ display:flex; align-items:center; gap:var(--space-4); flex-shrink:0; }
.header-phone{
  font-weight:700;
  font-size:var(--fs-small);
  color:var(--forest);
  white-space:nowrap;
}
@media (max-width:480px){
  .header-actions .btn{ padding:0.6rem 1rem; }
}

/* ----- 7. HERO --------------------------------------------------------------- */
.hero{ padding-block:var(--space-7) var(--space-6); }
.hero-grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:var(--space-6);
  align-items:center;
}
.hero-content{ grid-column:1 / span 6; }
.hero-eyebrow{
  color:var(--forest);
  font-weight:600;
  font-size:var(--fs-small);
  border-top:2px solid var(--green);
  display:inline-block;
  padding-top:var(--space-2);
  margin-bottom:var(--space-4);
}
.hero-content h1{
  font-size:var(--fs-h1);
  line-height:1.08;
}
.hero-content .lead{ margin-top:var(--space-4); }
.hero-actions{
  display:flex;
  gap:var(--space-4);
  margin-top:var(--space-5);
  flex-wrap:wrap;
  align-items:center;
}
.hero-media{
  grid-column:7 / span 6;
  border:var(--border-w) solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}
.hero-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; transition:transform 600ms ease; }
.hero-media:hover img{ transform:scale(1.03); }

@keyframes heroFadeUp{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:none; }
}
.hero-eyebrow,
.hero-content h1,
.hero-content .lead,
.hero-actions,
.hero-media{
  animation:heroFadeUp 700ms cubic-bezier(.2,.65,.3,1) both;
}
.hero-content h1{ animation-delay:70ms; }
.hero-content .lead{ animation-delay:140ms; }
.hero-actions{ animation-delay:210ms; }
.hero-media{ animation-delay:120ms; }

.hero-facts{
  margin-top:var(--space-7);
  padding-top:var(--space-5);
  border-top:var(--border-w) solid var(--border);
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--space-5);
}
.hero-fact dt{
  font-weight:700;
  color:var(--forest);
  font-size:0.95rem;
  margin-bottom:0.35rem;
}
.hero-fact dd{
  margin:0;
  color:var(--muted);
  font-size:var(--fs-small);
}

/* ----- 8. SERVICES ------------------------------------------------------------ */
.services-list{
  grid-column:6 / span 7;
  border-top:var(--border-w) solid var(--border);
}
.service-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
  gap:var(--space-5);
  padding-block:var(--space-5);
  border-bottom:var(--border-w) solid var(--border);
  transition:background var(--transition);
}
.service-row:hover{ background:var(--off-white); }
@media (min-width:640px){
  .service-row{ padding-inline:var(--space-3); margin-inline:calc(var(--space-3) * -1); }
}
.service-row h3{ font-size:var(--fs-h3); }
.service-row .service-desc{ color:var(--ink-soft); margin-top:var(--space-2); }
.service-includes{ margin-top:var(--space-2); }
.service-includes li{
  position:relative;
  padding-left:1rem;
  color:var(--ink-soft);
  font-size:var(--fs-small);
  margin-top:0.4rem;
}
.service-includes li::before{
  content:"";
  position:absolute;
  left:0; top:0.55em;
  width:5px; height:5px;
  background:var(--green);
}

/* ----- 9. PROCESS -------------------------------------------------------------- */
.process-layout{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:var(--space-6);
  align-items:start;
}
.process-media{
  grid-column:1 / span 4;
  border:var(--border-w) solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  position:sticky;
  top:130px;
}
.process-media img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform 600ms ease; }
.process-media:hover img{ transform:scale(1.03); }
.process-steps{ grid-column:5 / span 8; }
.process-step{
  display:grid;
  grid-template-columns:44px minmax(0, 1fr);
  gap:var(--space-4);
  padding-block:var(--space-4);
  border-top:var(--border-w) solid var(--border);
  transition:background var(--transition);
}
.process-step:last-child{ border-bottom:var(--border-w) solid var(--border); }
@media (min-width:640px){
  .process-step{ grid-template-columns:64px minmax(0, 1fr); padding-inline:var(--space-3); margin-inline:calc(var(--space-3) * -1); }
}
.process-step:hover{ background:var(--off-white); }
.process-number{
  font-size:1.5rem;
  font-weight:700;
  color:var(--border-dark);
  font-variant-numeric:tabular-nums;
  transition:color var(--transition);
}
.process-step:hover .process-number{ color:var(--forest); }
.process-step h3{ font-size:1.05rem; margin-bottom:0.3rem; }
.process-step p{ color:var(--ink-soft); font-size:var(--fs-small); max-width:56ch; }

/* ----- 10. SECTORS -------------------------------------------------------------- */
.sectors-grid{
  grid-column:6 / span 7;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:0;
  border-top:var(--border-w) solid var(--border);
  border-left:var(--border-w) solid var(--border);
}
.sector-card{
  border-right:var(--border-w) solid var(--border);
  border-bottom:var(--border-w) solid var(--border);
  padding:var(--space-5);
  transition:background var(--transition);
}
.sector-card:hover{ background:var(--off-white); }
.sector-card h3{ font-size:1.05rem; margin-bottom:0.4rem; }
.sector-card p{ color:var(--ink-soft); font-size:var(--fs-small); }
.sector-photos{
  grid-column:1 / span 12;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--space-4);
  margin-top:var(--space-6);
}
.sector-photos figure{ border:var(--border-w) solid var(--border); border-radius:var(--radius); overflow:hidden; margin:0; }
.sector-photos img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform 600ms ease; }
.sector-photos figure:hover img{ transform:scale(1.05); }
.sector-photos figcaption{
  padding:var(--space-2) var(--space-3);
  font-size:var(--fs-caption);
  color:var(--muted);
  border-top:var(--border-w) solid var(--border);
}

/* ----- 11. LICENSING ------------------------------------------------------------ */
.licensing-body{ grid-column:6 / span 7; }
.licensing-body .body-copy{ margin-bottom:var(--space-5); }
.activity-table{ border-top:var(--border-w) solid var(--border); }
.activity-table th{
  text-align:left;
  font-size:var(--fs-caption);
  color:var(--muted);
  font-weight:600;
  padding-block:var(--space-2);
  border-bottom:var(--border-w) solid var(--border);
}
.activity-table td{
  padding-block:var(--space-3);
  border-bottom:var(--border-w) solid var(--border);
  color:var(--ink-soft);
  font-size:var(--fs-small);
}
.activity-table td:first-child{ color:var(--ink); font-weight:600; width:40%; }
.licensing-note{
  margin-top:var(--space-5);
  padding:var(--space-4);
  background:var(--off-white);
  border:var(--border-w) solid var(--border);
  border-left:3px solid var(--forest);
  font-size:var(--fs-small);
  color:var(--ink-soft);
}

/* ----- 12. ABOUT ------------------------------------------------------------------ */
.about-layout{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:var(--space-6);
}
.about-body{ grid-column:6 / span 5; }
.about-media{
  grid-column:11 / span 2;
  display:none;
}
.about-media-block{
  grid-column:9 / span 4;
  border:var(--border-w) solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}
.about-media-block img{ width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform 600ms ease; }
.about-media-block:hover img{ transform:scale(1.03); }
.about-body .body-copy{ margin-bottom:var(--space-4); }

/* ----- 13. CONTACT ------------------------------------------------------------------ */
.contact-layout{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:var(--space-6);
}
.contact-details{ grid-column:1 / span 4; }
.contact-detail{ margin-bottom:var(--space-5); }
.contact-detail dt{
  font-size:var(--fs-caption);
  color:var(--muted);
  font-weight:600;
  margin-bottom:0.3rem;
}
.contact-detail dd{ margin:0; font-size:1.05rem; font-weight:600; color:var(--forest); }
.contact-detail dd a:hover{ color:var(--green); }

.contact-form-wrap{ grid-column:6 / span 7; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
.form-field{ margin-bottom:var(--space-4); }
.form-field label{
  display:block;
  font-size:var(--fs-small);
  font-weight:600;
  margin-bottom:0.4rem;
  color:var(--ink);
}
.form-field input,
.form-field textarea{
  width:100%;
  padding:0.7rem 0.85rem;
  border:var(--border-w) solid var(--border-dark);
  border-radius:var(--radius);
  background:var(--white);
  font-size:var(--fs-body);
  transition:border-color var(--transition);
}
.form-field input:focus,
.form-field textarea:focus{
  outline:2px solid var(--forest);
  outline-offset:1px;
  border-color:var(--forest);
}
.form-field textarea{ resize:vertical; min-height:120px; }
.form-note{ font-size:var(--fs-caption); color:var(--muted); margin-top:var(--space-3); }
.form-status{
  margin-top:var(--space-4);
  padding:var(--space-3) var(--space-4);
  border:var(--border-w) solid var(--border);
  border-left:3px solid var(--green);
  font-size:var(--fs-small);
  display:none;
  opacity:0;
  transform:translateY(6px);
  transition:opacity 400ms ease, transform 400ms ease;
}
.form-status.is-visible{ display:block; opacity:1; transform:none; }
.form-status.is-error{ border-left-color:#B3261E; }

/* ----- 14. FOOTER ------------------------------------------------------------------- */
footer.site-footer{
  background:var(--forest);
  color:var(--off-white);
  padding-block:var(--space-7) var(--space-5);
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:var(--space-5);
  padding-bottom:var(--space-6);
  border-bottom:var(--border-w) solid rgba(244,246,245,0.16);
}
.footer-brand{ grid-column:1 / span 4; }
.footer-brand .brand-mark{ margin-bottom:var(--space-3); }
.footer-brand .brand-name{ color:var(--white); font-weight:700; font-size:1.05rem; }
.footer-brand p{
  margin-top:var(--space-3);
  color:rgba(244,246,245,0.72);
  font-size:var(--fs-small);
  max-width:34ch;
}
.footer-col{ grid-column:span 2; }
.footer-col h3{
  color:var(--white);
  font-size:var(--fs-caption);
  font-weight:700;
  margin-bottom:var(--space-3);
}
.footer-col li{ margin-bottom:0.6rem; }
.footer-col a,
.footer-col span{
  color:rgba(244,246,245,0.78);
  font-size:var(--fs-small);
}
.footer-col a:hover{ color:var(--green); }

.footer-bottom{
  padding-top:var(--space-5);
  text-align:center;
  font-size:var(--fs-caption);
  color:rgba(244,246,245,0.6);
}

/* ----- 15. SCROLL REVEAL ----------------------------------------------------------------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity 700ms cubic-bezier(.2,.65,.3,1), transform 700ms cubic-bezier(.2,.65,.3,1);
}
.reveal.is-visible{ opacity:1; transform:none; }

.services-list .service-row:nth-child(1){ transition-delay:0ms; }
.services-list .service-row:nth-child(2){ transition-delay:60ms; }
.services-list .service-row:nth-child(3){ transition-delay:120ms; }
.services-list .service-row:nth-child(4){ transition-delay:180ms; }

.process-steps .process-step:nth-child(1){ transition-delay:0ms; }
.process-steps .process-step:nth-child(2){ transition-delay:60ms; }
.process-steps .process-step:nth-child(3){ transition-delay:120ms; }
.process-steps .process-step:nth-child(4){ transition-delay:180ms; }
.process-steps .process-step:nth-child(5){ transition-delay:240ms; }

.sectors-grid .sector-card:nth-child(1){ transition-delay:0ms; }
.sectors-grid .sector-card:nth-child(2){ transition-delay:50ms; }
.sectors-grid .sector-card:nth-child(3){ transition-delay:100ms; }
.sectors-grid .sector-card:nth-child(4){ transition-delay:150ms; }
.sectors-grid .sector-card:nth-child(5){ transition-delay:200ms; }
.sectors-grid .sector-card:nth-child(6){ transition-delay:250ms; }

.sector-photos figure:nth-child(1){ transition-delay:0ms; }
.sector-photos figure:nth-child(2){ transition-delay:90ms; }
.sector-photos figure:nth-child(3){ transition-delay:180ms; }

/* ----- 16. RESPONSIVE ----------------------------------------------------------------- */
@media (max-width: 1024px){
  .grid,
  .hero-grid,
  .process-layout,
  .about-layout,
  .contact-layout{ gap:var(--space-4); }

  .col-head{ grid-column:1 / span 12; margin-bottom:var(--space-4); }
  .col-body,
  .services-list,
  .sectors-grid,
  .licensing-body,
  .about-body,
  .about-media-block,
  .contact-form-wrap{ grid-column:1 / span 12; }

  .hero-content{ grid-column:1 / span 12; }
  .hero-media{ grid-column:1 / span 12; margin-top:var(--space-5); }
  .hero-media img{ aspect-ratio:16/9; }

  .process-media{ grid-column:1 / span 12; position:static; }
  .process-steps{ grid-column:1 / span 12; margin-top:var(--space-5); }

  .about-media-block{ margin-top:var(--space-5); order:2; }
  .about-body{ order:1; }

  .contact-details{ grid-column:1 / span 12; margin-bottom:var(--space-5); }
}

@media (max-width: 900px){
  .nav-toggle > summary{ display:inline-flex; }
  nav.primary-nav{
    display:none;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    position:absolute;
    left:0; right:0; top:100%;
    background:var(--white);
    border-bottom:var(--border-w) solid var(--border);
    padding:var(--space-3) var(--pad-inline) var(--space-4);
  }
  .nav-toggle[open] nav.primary-nav{ display:flex; }
  nav.primary-nav a{ width:100%; padding-block:0.6rem; border-bottom:var(--border-w) solid var(--border); }
  .utility-list{ gap:var(--space-3); }
}

@media (max-width: 720px){
  .hero-facts{ grid-template-columns:1fr; gap:var(--space-4); }
  .service-row{ grid-template-columns:1fr; }
  .sectors-grid{ grid-template-columns:1fr; }
  .sector-photos{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .footer-brand{ grid-column:1 / span 2; }
  .footer-col{ grid-column:span 1; margin-top:var(--space-4); }
  .form-row{ grid-template-columns:1fr; }
}

@media (max-width: 480px){
  .header-phone{ display:none; }
  .header-row{ gap:0.5rem; }
  .brand{ gap:0.5rem; }
  .brand-mark{ width:28px; }
  .brand-name{ font-size:0.92rem; }
  .brand-tag{ font-size:0.65rem; }
}

@media (max-width: 360px){
  .brand-tag{ display:none; }
}