/* ==========================================================================
   NEXT GEO — page stylesheet for the CONTACT PAIR
     TR  71     /bize-ulasin/        EN  25631  /en/contact-us/
   One authored sheet for both; `ng-page-apply.php contact-us
   --css-from=bize-ulasin` copies it to contact-us.css so the pair cannot
   drift.

   Loads last:
     ng-foundation → ng-components → ng-mobile → ng-shared → THIS FILE
   …and then, on this page only, Gravity Forms' own stylesheets, which is the
   one ordering problem this file has that no other page has. See §4.

   ---------------------------------------------------------------------------
   WHAT THIS PAGE IS FOR, AND WHY IT LOOKS LIKE THIS

   This is the site's conversion floor. 36 internal links point at
   /bize-ulasin/ and 31 at /en/contact-us/ — every "Bize ulaşın", every "Demo
   talep edin", the header button on every page, the footer on every page.
   What all of them landed on, measured with ng-page-check before this pass:

     1440: h=2531px  blank 20.5% (520px in 1 band)  h1:1 h2:1 h6:7  words 120
      390: h=3206px  blank 15.6% (500px in 1 band)  8 tap targets under 44px
     both: untracked body copy under 14px — .gfield_required @12px

   The 52 authored words were an address, a phone number, an e-mail address,
   four h6 labels and four 16x16 social glyphs. The single h1 was the theme's
   page-title banner, set over the stock 3D-city render the homepage pass had
   already deleted. And the 520px blank band was a Google Maps iframe that
   never painted: it carries loading="lazy" AND LiteSpeed rewrites it to
   data-litespeed-src, and with optm-js_defer=2 the swap script does not run.
   A fifth of the page was an element that reserved space and drew nothing.

   Four decisions follow, and they are the whole design:

   1. THE FORM IS PRESERVED, NOT REBUILT, AND IT IS GIVEN A SURFACE.
      `[gravityform id="1" title="false"]` (TR) and `id="2"` (EN) are copied
      character for character out of the old _elementor_data. Elementor filters
      the_content at priority 9 and WordPress runs do_shortcode at 11, so the
      shortcode still expands inside an Elementor html widget — checked in the
      filter table before authoring and in the rendered page after applying.
      What changed is everything around it: the form now sits on a raised card
      with a heading, a one-line hint, a data note and a three-step "what
      happens after you send" list.

   2. THE PAGE ANSWERS THE QUESTIONS A CONTACT FORM RAISES. "What should I
      write?" (§5, four cards). "What happens when I press send?" (§4b, three
      steps read out of the live Gravity Forms config). "Where does my data
      go?" (the note above it, linking the orphaned privacy policy). "Am I even
      in the right place?" (§6, six routes with checkable counts).

   3. THE MAP IS GONE AND NOTHING IS LOST. Address, coordinates and a
      directions link to the identical point replace it — see 40-office.html
      for the full argument, including why repairing the iframe with
      data-no-lazy was rejected on consent grounds.

   4. THE FORM COMES SECOND IN SOURCE ORDER, NOT FOURTH. Copy → form →
      channels, so at 390 the form is one screen from the top rather than
      below a headline, a lede, three contact rows and four social pills.
      At >=960 the CSS puts channels back under the copy in the left column.
   ========================================================================== */


/* ==========================================================================
   1. MASTHEAD COMPOSITION
   ========================================================================== */

/* Three grid children, two columns, two rows. .ng-masthead__inner already
   supplies `display:grid`, `align-items:start` and the single-column mobile
   case, so only the >=960 case is written here.

   47/53, i.e. the .ng-masthead default (58/42) INVERTED. On every other inner
   page the aside is supporting material; here it is the reason the page
   exists. Built first at the default 58/42 and rejected by measurement: at
   1440 the form column came out 428px wide, and Gravity Forms lays Email and
   Telefon side by side as gfield--width-half, so each landed at ~198px. A
   198px e-mail field is not a form, it is an apology for one. */
@media (min-width:960px){
  .ng-v2 .ng-cmh__inner{
    grid-template-columns:minmax(0,47fr) minmax(0,53fr);
    /* THREE rows, and the third one is the whole point. With only two auto
       rows and the form spanning both, the form is the taller child, and CSS
       Grid distributes a spanning item's excess height EQUALLY across the auto
       rows it spans — so ~50px of slack was being injected between the lede
       and the TELEFON row, which looked exactly like a margin bug and is not
       one. A trailing `1fr` row that holds nothing absorbs all of it below the
       social pills instead, where there is nothing to push apart. Measured at
       1440 on both languages: 88px of gap became 36px. */
    grid-template-rows:auto auto 1fr;
    column-gap:48px;
    row-gap:36px;
  }
  .ng-v2 .ng-cmh__inner > .ng-masthead__copy{ grid-column:1; grid-row:1; }
  /* The form spans every row so its card edge runs the full height of the left
     column rather than floating opposite the headline with the contact rows
     hanging below it in open space. */
  .ng-v2 .ng-cmh__inner > .ng-formcard{ grid-column:2; grid-row:1 / -1; }
  .ng-v2 .ng-cmh__inner > .ng-chwrap{ grid-column:1; grid-row:2; }
  /* The grid's own 36px row-gap already separates the lede from the channel
     stack; .ng-ch's 32px top margin is for the single-column case, where the
     two are siblings in one flow. Left in, the two stacked and measured 68px
     of white between the lede and the TELEFON row at 1440. */
  .ng-v2 .ng-cmh__inner > .ng-chwrap .ng-ch{ margin-top:0; }
}

/* 20ch, not the shared 18ch. Both headlines are full sentences with a
   highlighted noun phrase in the middle; at 18ch the Turkish one broke as
   "Bize ulaşın, / lokasyon / sorunuzu birlikte / tanımlayalım." — four lines
   with the highlight orphaned on its own. */
.ng-v2 .ng-cmh .ng-masthead__title.ng-masthead__title{ max-width:20ch; }


/* ==========================================================================
   2. THE THREE PUBLISHED CHANNELS
   ========================================================================== */

.ng-v2 .ng-chwrap{ min-width:0; }

/* A bordered stack, not three floating label/value pairs. The old page set
   each channel as an h6 followed by a paragraph, which is why the page
   reported SEVEN h6 elements and one h2 — a heading outline made entirely of
   the word "Telefon". They are a list of channels, so they are a <ul>, and the
   hairline between rows is what makes them read as one component instead of
   as three stray lines under the lede. */
.ng-v2 .ng-ch{
  list-style:none; margin:32px 0 0; padding:0;
  border-top:1px solid var(--ng-hairline);
}
.ng-v2 .ng-ch > li{ border-bottom:1px solid var(--ng-hairline); }

/* THE WHOLE ROW IS THE LINK. On the old page the address was plain text — a
   visitor had to select it by hand to copy it — while the phone and e-mail
   were bare inline links inside a paragraph. Grid rather than flex because the
   label column must stay a constant width down the stack; `auto` on the value
   lets a long address wrap under itself without dragging the label with it. */
.ng-v2 .ng-ch__row{
  display:grid;
  grid-template-columns:96px minmax(0,1fr);
  align-items:baseline;
  gap:4px 14px;
  min-height:56px;                    /* comfortably over the 44px minimum at
                                         every width, so no mobile branch is
                                         needed for these three */
  padding:15px 0;
  color:var(--ng-ink);
  text-decoration:none;
}
@media (any-hover:hover){
  .ng-v2 .ng-ch__row:hover .ng-ch__value{ color:var(--ng-accent); }
  .ng-v2 .ng-ch__row:hover .ng-arrow{ transform:translate3d(4px,0,0); }
}
/* 12px is allowed here and only because letter-spacing is >= 0.08em — the
   tracked-label exception in the contract. These are glanced at to find the
   row, not read. */
.ng-v2 .ng-ch__label{
  font-family:var(--ng-font-label); font-weight:600;
  font-size:12px; line-height:1.35; letter-spacing:.1em;
  text-transform:none;                /* strings are authored pre-uppercased:
                                         "E-POSTA" via uppercase() would still
                                         be fine, but "İLETİŞİM" would not, and
                                         one rule for all of them is safer than
                                         remembering which is which */
  color:var(--ng-muted);
}
/* The value is READ and copied — a phone number and a street address — so it
   takes the 14px floor and then some. 16px display face at 600 puts it at the
   same weight as a card title, which is right: on a contact page these three
   strings are the content. */
.ng-v2 .ng-ch__value{
  font-family:var(--ng-font-display); font-weight:600;
  font-size:16px; line-height:1.5;
  color:var(--ng-ink);
  overflow-wrap:anywhere;             /* info@nextgeography.com is 22 unbroken
                                         characters and the label column takes
                                         96px of a 342px content box at 390 */
  transition:color .16s cubic-bezier(.25,.46,.45,.94);
}
.ng-v2 .ng-ch__value .ng-arrow{ margin-left:.4em; }

.ng-v2 .ng-ch__social-label{ margin:26px 0 0; }
/* .ng-actions ships margin-top:28px; the label above it already provides the
   separation, so this only closes the gap back up. */
.ng-v2 .ng-ch__social{ margin-top:12px; }


/* ==========================================================================
   3. THE FORM CARD
   ========================================================================== */

/* Raised surface, the same role as .ng-card — white, hairline, soft shadow —
   but NOT the .ng-card class. Two reasons, both practical: .ng-card is a flex
   column with `height:100%` and a `margin-top:auto` link slot that would fight
   a form, and ng-shared.css §10 makes every .ng-card an animation target with
   a blur filter, which on an element containing focusable inputs means the
   browser is compositing a blurred layer around a text cursor. .ng-anim on the
   wrapper gives the identical entrance without the filter landing on the
   fields.

   28px of padding, not the card's 24/22. The form's own fields already carry
   16px of internal padding, and at 22px the input edges sat 6px from the card
   edge, which read as an overflow rather than as an inset. */
.ng-v2 .ng-formcard{
  min-width:0;
  padding:28px;
  background:var(--ng-surface);
  border:1px solid var(--ng-hairline);
  border-radius:var(--ng-radius);
  box-shadow:var(--ng-shadow-card);
}
.ng-v2 .ng-formcard__label{ margin:0; }

/* (0,3,0) doubled — ng-shared.css §11. Without it the theme's
   `body .content-wrapper h2:not(:first-child){margin-top:50px}` at (0,2,2)
   wins and opens 50px between the eyebrow and this heading. */
.ng-v2 .ng-formcard__title.ng-formcard__title{
  margin:12px 0 0;
  font-size:26px; line-height:1.2;
  letter-spacing:-0.02em;
}
.ng-v2 .ng-formcard__hint{
  margin:10px 0 0;
  font-size:15px; line-height:1.6;
  color:var(--ng-muted);              /* 6.21:1 on white */
  max-width:44ch;
}
.ng-v2 .ng-formcard__mount{ margin-top:22px; }

/* The data note. 14px, not tracked, because it is a sentence about personal
   data and it has to be readable — this is the only route on the whole site to
   /gizlilik-politikasi/, which is in no menu and linked from nowhere. */
.ng-v2 .ng-formcard__note{
  margin:18px 0 0;
  font-size:14px; line-height:1.6;
  color:var(--ng-muted);
}
.ng-v2 .ng-formcard__note a{
  color:var(--ng-accent);             /* 5.64:1 on white */
  text-decoration:underline; text-underline-offset:3px;
}


/* ==========================================================================
   4. GRAVITY FORMS — the one place on this site where our sheet is NOT last
   ==========================================================================
   Gravity Forms enqueues its own stylesheets while the form renders, i.e.
   after wp_enqueue_scripts has already queued ng-page-bize-ulasin.css, and
   LiteSpeed then combines everything in that order. So GF's CSS loads AFTER
   ours and a tie on specificity goes to GF, not to us.

   Two things make this survivable and they are why nothing below needs
   `!important`:
     - the GF "orbital" theme wraps almost all of its declarations in
       `:where(...)`, which contributes ZERO specificity;
     - everything below is written as `.ng-v2 .ng-formcard__mount <target>`,
       which is (0,3,x) at minimum.

   Verified after applying, not assumed: the rendered form uses our field
   metrics, our label face and our pill submit button.

   NOTHING HERE TOUCHES THE FORM'S STRUCTURE, its field ids, its names, its
   hidden inputs or its Turnstile container. This is paint only — the form must
   keep submitting, and it does. */

.ng-v2 .ng-formcard__mount .gform_wrapper{ margin:0; }

/* GF prints an always-empty <p class="gform_description"> when the form has no
   description. It is a real paragraph with a real margin. */
.ng-v2 .ng-formcard__mount .gform_description:empty{ display:none; }

.ng-v2 .ng-formcard__mount .gform_heading{ margin:0 0 18px; }

/* ---- 4a. THE CUSTOMIZER STYLESHEET, WHICH IS THE REAL ADVERSARY HERE -------
   `wp_custom_css` (Appearance → Additional CSS) is the very LAST thing in the
   2.09MB LiteSpeed bundle, after our sheet and after every Gravity Forms
   sheet. It contains, verbatim, at bytes 2,085,537–2,086,600 of the combined
   file:

       .gform_required_legend{display:none}
       .gform-theme--framework .gform-field-label>.gfield_required:where(…){color:#fff}
       .gform-theme--framework .gform-field-label:where(…){color:#fff}
       .gform-theme--framework .gform-field-label:where(…){color:#fff!important}
       #gform_submit_button_1{background-color:#E71D73}
       #gform_submit_button_2{background-color:#E71D73}

   Every field label on this site is therefore WHITE, on a white card. That is
   not a theory: the page this replaces shipped its own inline `<style>` block
   inside an Elementor html widget forcing `color:#000!important` back onto the
   same selector — someone hit this before and patched it in page content. That
   patch died with the old payload, so the fix has to live here now.

   `:where()` contributes zero specificity, so the two non-important rules are
   only (0,2,0) and our (0,3,0) rules already beat them. The third one is
   `!important` and cannot be beaten at ANY specificity, so the single `color`
   declaration below is `!important` too — the only one in this file, and the
   only property it touches. This is the same and only exemption
   ng-shared.css §10 documents: an !important that exists solely to cancel an
   !important, scoped as tightly as possible — inside .ng-formcard__mount, on
   this page pair only, on the one property that is broken.

   The submit-button rules are ID selectors (1,0,0), which a class chain cannot
   reach either; those are answered with the ids rather than with !important,
   below. Form 1 is the Turkish page, form 2 the English one. */
.ng-v2 .ng-formcard__mount .gfield_label.gfield_label,
.ng-v2 .ng-formcard__mount .gform-field-label.gform-field-label{
  color:var(--ng-ink) !important;     /* 14.95:1 on white; was #fff on #fff */
}

/* The '"*" gerekli alanları gösterir' legend is `display:none` site-wide from
   the same stylesheet. It is BROUGHT BACK on this page: it is the only thing
   that explains what the asterisk beside two of the four labels means, the
   asterisk is the form's only required-field affordance, and a form that marks
   requirements with an unexplained glyph fails 3.3.2. (0,3,0) beats the
   customizer's (0,1,0) without !important. */
.ng-v2 .ng-formcard__mount .gform_required_legend{
  display:block;
  margin:0;
  font-size:14px; line-height:1.5;
  color:var(--ng-muted);
}
/* The asterisk itself, in the legend and beside every required label. The
   customizer paints the OUTER .gfield_required span white too, at (0,3,0), so
   this is written at (0,4,0) via the label class to clear it. 14px floor, and
   the accent rather than GF's red: this site has no red in its palette and a
   red asterisk on an untouched form reads as an error state. */
.ng-v2 .ng-formcard__mount .gfield_label .gfield_required,
.ng-v2 .ng-formcard__mount .gform_required_legend .gfield_required,
.ng-v2 .ng-formcard__mount .gfield_required_custom{
  font-size:14px; line-height:1;
  color:var(--ng-accent);             /* 5.64:1 on white */
}
/* GF normally separates the asterisk from the label with a flex `gap`, which
   our `display:block` on the label (needed to beat the customizer) removes —
   so it rendered as "Ad-Soyad*", glued on. A margin restores the gap without
   giving the label a flex context that a wrapped Turkish label would then
   break differently in. */
.ng-v2 .ng-formcard__mount .gfield_label > .gfield_required{ margin-left:.28em; }

/* GF orbital lays .gform_fields out as a 12-column grid and gives
   gfield--width-half `grid-column:span 6`, which is what puts Email and
   Telefon side by side. That is kept — it is the client's own field layout —
   and only the gutters are ours. */
.ng-v2 .ng-formcard__mount .gform_fields{
  row-gap:18px;
  column-gap:16px;
}

/* The field label. GF ships it at the theme's inherited face and the OLD PAGE
   forced `color:#000 !important` on it from an inline <style> block inside an
   Elementor html widget — pure black on a page whose ink is #1B1F5E. That
   block is gone with the rest of the old payload; this is what replaces it. */
.ng-v2 .ng-formcard__mount .gfield_label{
  display:block;
  margin:0 0 8px;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:14px; line-height:1.4; letter-spacing:0;
  color:var(--ng-ink);                /* 14.95:1 on white */
}

/* Fields. 48px is the resting height and 16px the type size: 16px is the iOS
   threshold below which Safari zooms the viewport on focus, and this page is
   the one page on the site where that would be actively hostile. The radius is
   --ng-radius-sm, i.e. the same 12px the rest of the small chrome uses; GF's
   own default is 3px, which on a page of 18px cards looks like a different
   product embedded in ours. */
.ng-v2 .ng-formcard__mount .ginput_container input,
.ng-v2 .ng-formcard__mount .ginput_container textarea,
.ng-v2 .ng-formcard__mount .ginput_container select{
  width:100%;
  min-height:48px;
  padding:12px 14px;
  font-family:var(--ng-font-body);
  font-size:16px; line-height:1.5;
  color:var(--ng-ink);
  background:var(--ng-ground);        /* paper, not white: a white field on a
                                         white card is invisible without a
                                         heavy border, and a heavy border on
                                         four fields is a wireframe. The
                                         hairline plus the faint tint is the
                                         same raised/inset relationship the
                                         rest of the system uses. */
  border:1px solid var(--ng-hairline);
  border-radius:var(--ng-radius-sm);
  transition:border-color .16s cubic-bezier(.25,.46,.45,.94),
             background-color .16s cubic-bezier(.25,.46,.45,.94);
}
.ng-v2 .ng-formcard__mount .ginput_container textarea{
  min-height:132px;                   /* ~5 lines. GF's own rows=10 renders a
                                         320px box that pushed the submit
                                         button below the fold at 390. */
  resize:vertical;
}
.ng-v2 .ng-formcard__mount .ginput_container input:hover,
.ng-v2 .ng-formcard__mount .ginput_container textarea:hover{
  border-color:var(--ng-border-strong);
}
.ng-v2 .ng-formcard__mount .ginput_container input:focus,
.ng-v2 .ng-formcard__mount .ginput_container textarea:focus{
  background:var(--ng-surface);
  border-color:var(--ng-accent);
  outline:none;                       /* the foundation's two-tone
                                         :focus-visible ring draws instead, and
                                         it is the same ring as every other
                                         control on the site */
}

/* Turnstile. The Cloudflare widget renders an iframe at its own intrinsic
   size; all this does is give it the same rhythm as a field. */
.ng-v2 .ng-formcard__mount .ginput_container_turnstile{ margin-top:2px; }
.ng-v2 .ng-formcard__mount .ginput_container_turnstile iframe{ max-width:100%; }

/* Submit. Restyled to .ng-btn's shape rather than left as GF's square button:
   this is the most important control on the site and it should be the same
   pill as every other primary action. 52px, one step over the 48px pill,
   because it is the terminal action of the page. */
.ng-v2 .ng-formcard__mount .gform_footer{
  margin:22px 0 0; padding:0;
}
/* WRITTEN ON THE IDS, and this is the second specificity trap on this page.
   Gravity Forms' own button rule is

       .gform-theme.gform-theme--framework.gform_wrapper .button:where(…){…}

   — three classes on the wrapper plus `.button` on the input, i.e. (0,4,0),
   with its :hover and :focus variants at (0,5,0). A `.ng-v2
   .ng-formcard__mount .gform_button` chain is only (0,3,0) and LOSES: applied
   that way, the background took (that one came from the customizer's own id
   rule) but the 52px height, the 34px padding and the pill radius did not, and
   the button rendered as a 40px rectangle with a 6px radius. Only a screenshot
   showed it — every declaration was present in the sheet and every one of them
   was being overruled.

   The customizer additionally sets `#gform_submit_button_1/2{background-color:
   #E71D73}` at (1,0,0). One id chain answers both problems at once, so the
   whole button is written here rather than split across two rules. Form 1 is
   the Turkish page, form 2 the English one, and this stylesheet serves exactly
   those two pages.

   The colour change is also a contrast fix: white on #E71D73 is 4.37:1, under
   the 4.5 bar for a 16px label. --ng-cta-fill (#C61073) is the darkened
   same-hue accent this build uses for precisely that reason, at 5.64:1. */
.ng-v2 .ng-formcard__mount #gform_submit_button_1,
.ng-v2 .ng-formcard__mount #gform_submit_button_2{
  display:inline-flex; align-items:center; justify-content:center;
  width:auto;
  min-height:52px;
  padding:15px 34px;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:16px; line-height:1.15; letter-spacing:0;
  color:var(--ng-cta-label);          /* white on accent = 5.64:1 */
  background:var(--ng-cta-fill);
  border:0; border-radius:var(--ng-radius-pill);
  cursor:pointer;
  transition:background-color .16s cubic-bezier(.25,.46,.45,.94),
             transform .16s cubic-bezier(.25,.46,.45,.94);
}
@media (any-hover:hover){
  .ng-v2 .ng-formcard__mount #gform_submit_button_1:hover,
  .ng-v2 .ng-formcard__mount #gform_submit_button_2:hover{
    background:var(--ng-cta-fill-hover);   /* 7.43:1 */
  }
}
.ng-v2 .ng-formcard__mount #gform_submit_button_1:active,
.ng-v2 .ng-formcard__mount #gform_submit_button_2:active{
  transform:translate3d(0,1px,0);
}

/* Validation. GF's own error colours are left alone — they are the plugin's
   accessible defaults and a redesign has no business making an error message
   prettier and quieter. Only the metrics are brought into line. */
.ng-v2 .ng-formcard__mount .gfield_description,
.ng-v2 .ng-formcard__mount .validation_message{
  font-size:14px; line-height:1.5;
  margin-top:8px;
}
.ng-v2 .ng-formcard__mount .gform_submission_error{
  font-size:18px; line-height:1.4;
}
/* The confirmation the form swaps in on success. It replaces the whole form
   inside our card, so it needs to look like it belongs to the card. */
.ng-v2 .ng-formcard__mount .gform_confirmation_message{
  font-size:16px; line-height:1.6;
  color:var(--ng-ink);
}


/* ==========================================================================
   4b. WHAT HAPPENS AFTER YOU PRESS SEND
   ========================================================================== */

/* Three numbered lines on a hairline rule, at the bottom of the form card.
   Every line is read out of the live Gravity Forms configuration — an
   on-screen confirmation, an auto-reply notification addressed to the e-mail
   field, and the client's own closing sentence — so this is the page stating
   what its own software already does, not a service promise. */
.ng-v2 .ng-after{
  list-style:none;
  margin:22px 0 0; padding:20px 0 0;
  border-top:1px solid var(--ng-hairline);
  display:grid; gap:10px;
}
.ng-v2 .ng-after > li{
  display:grid;
  grid-template-columns:26px minmax(0,1fr);
  align-items:baseline;
  gap:10px;
}
.ng-v2 .ng-after__n{
  font-family:var(--ng-font-label); font-weight:600;
  font-size:12px; line-height:1.4; letter-spacing:.1em;
  text-transform:none;
  color:var(--ng-accent);             /* 5.64:1 on white */
}
.ng-v2 .ng-after__t{
  font-size:14px; line-height:1.55;
  color:var(--ng-muted);
}


/* ==========================================================================
   5. THE BRIEF — four cards on a sunken band
   ========================================================================== */

/* These four cards are NOT links, unlike every other card grid in this system,
   and that is deliberate: they are the contents of a message, not four more
   destinations. .ng-card without --link therefore never lifts and never shows
   an arrow, which is exactly the signal wanted — read it, then go back up to
   the form. */
.ng-v2 .ng-brief .ng-card__meta{ color:var(--ng-accent); }
.ng-v2 .ng-brief .ng-card__title.ng-card__title{ margin-top:10px; }

/* Centred under the grid, held to the note measure. It is the escape hatch for
   the visitor who has none of the four answers, and burying it at the end of
   the lede above the cards (the first draft) put the reassurance BEFORE the
   thing it reassures about. */
.ng-v2 .ng-brief__note{
  margin-inline:auto;
  margin-top:26px;
  text-align:center;
  max-width:74ch;
}


/* ==========================================================================
   6. ROUTES — six destinations
   ========================================================================== */

/* Nothing composition-specific: .ng-grid--3 and .ng-card--link from
   ng-shared.css do the whole job, which is the point of having them. The one
   page-level rule is the meta colour, so a COUNT ("14 SEKTÖR") reads as data
   rather than as a muted category label — the counts are the reason these six
   cards are distinguishable from one another at a glance. */
.ng-v2 .ng-routes .ng-card__meta{ color:var(--ng-accent); }


/* ==========================================================================
   7. THE OFFICE — indigo closing band, and the coordinate readout
   ========================================================================== */

/* ng-shared.css §1 gives .ng-section--dark a centred flex column, which is
   right for a one-decision closing CTA and wrong here: this band carries an
   address, two buttons, an e-mail address and a data plate, and centring all
   of it produced a ragged 5-line stack down the middle of a 1120px container.
   Both rules below restate the shared selectors at equal specificity and win
   on load order. */
.ng-v2 .ng-office{ text-align:left; }
.ng-v2 .ng-office > .ng-container{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:start;
  gap:32px;
}
@media (min-width:900px){
  .ng-v2 .ng-office > .ng-container{
    grid-template-columns:minmax(0,1fr) minmax(0,420px);
    column-gap:56px;
    align-items:center;
  }
}
.ng-v2 .ng-office__copy{ min-width:0; }
.ng-v2 .ng-office__eyebrow{ margin:0; }

/* (0,3,0) doubled, same reason as every other heading class here. */
.ng-v2 .ng-office__title.ng-office__title{
  margin:16px 0 0;
  font-size:clamp(1.75rem, 3.6vw, 2.5rem);
  line-height:1.12;
  letter-spacing:-0.02em;
  color:var(--ng-ink);                /* #FAFBFF on indigo = 14.46:1 */
}
.ng-v2 .ng-office__addr{
  margin:16px 0 0;
  font-size:17px; line-height:1.65;
  color:var(--ng-muted);              /* #C6C9EA on indigo = 9.22:1 */
}
.ng-v2 .ng-office__actions{ margin-top:26px; }
.ng-v2 .ng-office__meta{
  margin:24px 0 0;
  font-size:14px; line-height:1.6;
  color:var(--ng-muted);
}
.ng-v2 .ng-office__mail{
  color:var(--ng-ink);
  text-decoration:underline; text-underline-offset:4px;
}
.ng-v2 .ng-office__mail:hover{ color:var(--ng-accent); }   /* #FF9BC9, 7.68:1 */

/* THE READOUT. A plate on the 6%-paper surface holding the office's own
   latitude and longitude, in the same chrome idiom the homepage product panel
   uses. This is the section's "show it rather than describe it": the map it
   replaces was a 600x450 iframe that drew nothing, and a location-intelligence
   company publishing its own coordinates says more about what it does than a
   borrowed basemap tile does. The values come from the client's own embed URL,
   not from a lookup. */
.ng-v2 .ng-geo{
  padding:0;                          /* the map bleeds to the card's edges */
  overflow:hidden;                    /* so it takes the corner radius */
  background:var(--ng-surface);       /* rgba(250,251,255,.06) inside is-dark */
  border:1px solid var(--ng-hairline);
  border-radius:var(--ng-radius);
}
/* THE MAP. A build-time raster of Google tiles, not an embed: the iframe this
   section replaced painted nothing under deferred JS, cost ~500px of dead air
   and set third-party cookies before anyone asked for a map. A raster costs one
   request to our own origin, cannot break in the field, and the visitor reaches
   Google only if they click. aspect-ratio holds the box before the raster
   arrives, and width/height on the <img> holds it again — CLS 0 either way. */
.ng-v2 .ng-geo__map{ display:block; }
.ng-v2 .ng-geo__map img{
  display:block; width:100%; height:auto;
  aspect-ratio:8/5;                   /* the raster's own ratio, 880x550 */
  object-fit:cover;
}
.ng-v2 .ng-geo__body{ padding:22px 20px; }
.ng-v2 .ng-geo__label{ margin:0; }
.ng-v2 .ng-geo__grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin:16px 0 0;
}
.ng-v2 .ng-geo__cell{ min-width:0; }
/* dt/dd carry theme margins; the reset is here rather than a global one so it
   cannot reach any other page's definition lists. */
.ng-v2 .ng-geo__k{
  margin:0;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:12px; line-height:1.35; letter-spacing:.1em;
  text-transform:none;
  color:var(--ng-muted);              /* 7.84:1 on the .06 surface */
}
.ng-v2 .ng-geo__v{
  margin:6px 0 0;
  font-family:var(--ng-font-display); font-weight:700;
  font-size:22px; line-height:1.15; letter-spacing:-0.01em;
  color:var(--ng-ink);                /* 12.30:1 on the .06 surface */
  font-variant-numeric:tabular-nums;  /* two stacked coordinates whose digits
                                         do not line up read as a typo */
}
.ng-v2 .ng-geo__note{
  margin:16px 0 0; padding-top:14px;
  border-top:1px solid var(--ng-hairline);
  font-size:14px; line-height:1.55;
  color:var(--ng-muted);
}


/* ==========================================================================
   8. MOBILE
   ng-shared.css §12 already sets the 16px reading floor and the 44px targets
   for every primitive this page reuses (.ng-crumbs, .ng-btn--pill,
   .ng-actions, .ng-lede, .ng-card__body, .ng-note). Only what this page adds
   needs a branch.
   ========================================================================== */
@media (max-width:767px){

  /* Reading floor. The three channel values, the form hint, the data note and
     the three post-submit lines are all prose and all go to 16px. The tracked
     labels (.ng-ch__label, .ng-after__n, .ng-geo__k — all 12px at >= 0.1em)
     stay, per the contract's label exception. */
  .ng-v2 .ng-ch__value{ font-size:17px; }
  .ng-v2 .ng-formcard__hint,
  .ng-v2 .ng-formcard__note,
  .ng-v2 .ng-after__t,
  .ng-v2 .ng-geo__note,
  .ng-v2 .ng-office__meta{ font-size:16px; }
  .ng-v2 .ng-office__addr{ font-size:16px; }

  /* 22px, not 28. At 390 the container's own 24px inline padding plus 28px of
     card padding left a 290px measure for a form, and the Email/Telefon pair
     had already collapsed to full width by then anyway. */
  .ng-v2 .ng-formcard{ padding:22px 18px; }
  .ng-v2 .ng-formcard__title.ng-formcard__title{ font-size:23px; }

  /* Full-bleed submit. Matches .ng-actions' behaviour at this width (shared
     §12) so the form's action and the page's actions are the same shape.
     On the ids for the same specificity reason as the base rule. */
  .ng-v2 .ng-formcard__mount #gform_submit_button_1,
  .ng-v2 .ng-formcard__mount #gform_submit_button_2{ width:100%; }

  /* The label column shrinks; the value keeps the full remaining measure. */
  .ng-v2 .ng-ch__row{ grid-template-columns:76px minmax(0,1fr); }

  /* min-WIDTH, not just min-height. ng-shared.css §12 gives .ng-btn--pill
     min-height:44px, which is only half of 2.5.5: the "X" chip measured
     39x44 at 390 because a one-character label plus 15px of padding is 39px
     wide. Same finding the shared sheet already records for a four-letter
     breadcrumb; a one-letter social account is the extreme case of it. */
  .ng-v2 .ng-ch__social .ng-btn--pill{ min-width:44px; }

  /* Two inline links inside sentences: the office mailbox (measured 195x20)
     and the privacy-policy link in the form card's data note (105x20). Both
     are full-width-enough targets that are 24px too short. inline-flex is what
     makes min-height apply at all on an inline element; the same treatment
     ng-shared.css §12 gives .ng-cta__tel, for the same reason. Both labels are
     short enough (<=19 characters at 16px, ~150px) that becoming an atomic
     inline box cannot overflow the 306px measure at 390. */
  .ng-v2 .ng-office__mail,
  .ng-v2 .ng-formcard__note a{
    display:inline-flex; align-items:center;
    min-height:44px; min-width:44px;
  }

  .ng-v2 .ng-geo__body{ padding:20px 18px; }
  .ng-v2 .ng-geo__v{ font-size:20px; }
  .ng-v2 .ng-brief__note{ text-align:left; }
}

/* Below 380 the 76px label column plus a 22-character e-mail address is
   tight enough that the two-column row is worse than a stack. */
@media (max-width:379px){
  .ng-v2 .ng-ch__row{
    grid-template-columns:minmax(0,1fr);
    gap:2px;
    padding:12px 0;
  }
}

/* ==========================================================================
   TAP TARGETS AT 768 — 1023px
   ng-shared.css §tablet now raises .ng-btn, .ng-crumbs__link and .ng-cta__tel
   to 44px in this range; these three are this page's own classes, so they are
   this page's job. All were found only after ng-page-check's tap-target ceiling
   was raised from 600px to 1024px — the 768 tablet range had never been checked
   and was being served desktop link sizes.

   Measured here at 768: the privacy link inside the form note at 105x17, the
   office e-mail at 170x17, and the "X" social pill at 37x44 — tall enough and
   still a failure, because 2.5.5 wants a 44x44 box and a one-letter label is
   narrower than that. min-width fixes the third; the other two are inline in a
   sentence, so they get an inline-flex box rather than padding that would push
   the surrounding text apart.
   ========================================================================== */
/* max-width:1024px, NOT 1023. Third time this off-by-one has been fixed: it was
   first closed in ng-shared.css (which the homepages do not load), then in
   ng-mobile.css §7 for the shared primitives — and these page-specific classes
   were still bounded at 1023, so they failed at exactly 1024 on a live page.
   ng-page-check enforces hit areas up to and INCLUDING 1024 because 1024 CSS px
   is iPad landscape. This block contains hit areas only, so widening it by one
   pixel changes no layout. */
@media (min-width:768px) and (max-width:1024px){
  .ng-v2 .ng-formcard__note a,
  .ng-v2 .ng-office__mail{
    display:inline-flex; align-items:center;
    min-height:44px;
  }
  /* A one-letter social pill. min-width only — its height is already 44. */
  .ng-v2 .ng-actions .ng-btn{ min-width:44px; }
}